Disabled inputs in bootstrap. How to apply it to a different TAG?

Question

By using disabled attribute on an input is possible to prevent user input and trigger a slightly different look.
Here is the demo http://jsfiddle.net/D2RLR/3023/

Let's suppose I want to apply the same style to a different TAG like a table.
In fact, I am using handsontable to generate an Excel-like data grid editor.
How can I apply disabled attribute in the following context (TAG like a table)?

Here is the demo using handsontable and bootstrap http://jsfiddle.net/D2RLR/3025/

You can't unless the plugin has some option to do so, as those are just regular elements moving around with the blue border and everything. Closest would be to just override the events from the plugin, or create your own plugin. — adeneo, Oct 31 '12 at 00:07
@adeneo thanks for your comment. Anyway, maybe I should not apply `disabled attribute` on table but find a way to apply it to the input form when clicking on cell belonging to a handsontable data grid. Any idea how to make it? — Lorraine Bernard, Oct 31 '12 at 00:10

Sara · Answer 1 · 2012-10-31T00:44:16.277

7

You can't apply Bootstrap's existing input[disabled] styling, but you can add new CSS that mimics the styles exactly.

For example:

#exampleGrid td {
    cursor: not-allowed;
    background-color: #EEE;
    color: #9E9999;
}

Obviously this doesn't include your readonly logic, and looks a little weird with your fiddle (because the column and row headers are the same color), but that's the gist of it.

edited Oct 31 '12 at 00:44

answered Oct 31 '12 at 00:38

Sara

8,222
1
37
52

score 6 · Answer 2 · answered Oct 31 '12 at 00:11

6

Check here:

http://handsontable.com/demo/conditional.html

There is .readOnly cell property - use it!

HTML inputs also have readonly property, not only disabled property, an there are some considerable differences between their behaviour.

answered Oct 31 '12 at 00:11

Reflective

3,854
1
13
25

+1 Thanks for your answer. I already know about the `readOnly cell property`. Anyway my wuestion is different. I would like to apply to this cell the style `disabled inputs` as in bootstrap. – Lorraine Bernard Oct 31 '12 at 00:14

score 0 · Answer 3 · answered Oct 31 '12 at 00:22

Boostrap is only styling the inputs based on their disabled attribute like:

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
    background-color: #EEEEEE;
    cursor: not-allowed;
}

So you won't be able to use bootstrap to do that, because tables don't have such attribute.

You should use a plugin of sorts or roll your own.

score 0 · Answer 4 · edited Jan 14 '14 at 22:29

Maybe this can help... changes the look of the cell and you can edit on it.

HTML

<table class="editableTable">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>E-mail</th>
            <th>Telephone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>João Carlos</td>
            <td>joca@email.com</td>
            <td>(21) 9999-8888</td>
        </tr>
        <tr>
            <td>002</td>
            <td>Maria Silva</td>
            <td>mariasilva@mail.com</td>
            <td>(81) 8787-8686</td>
        </tr>
        <tr>
            <td>003</td>
            <td>José Pedro</td>
            <td>zepedro@meuemail.com</td>
            <td>(84) 3232-3232</td>
        </tr>
    </tbody>
</table>

CSS

* {
    font-family: Consolas;
}

.editableTable {
    border: solid 1px;
    width: 100%
}

.editableTable td {
    border: solid 1px;
}

.editableTable .editingCell {
    padding: 0;
}

.editableTable .editingCell input[type=text] {
    width: 100%;
    border: 0;
    background-color: rgb(255,253,210);
}

JS

$(function () {

    $("td").dblclick(function () {
        var originalContent = $(this).text();

        $(this).addClass("editingCell");
        $(this).html("<input type='text' value='" + originalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("editingCell");
            }
        });

        $(this).children().first().blur(function(){
            $(this).parent().text(originalContent);
            $(this).parent().removeClass("editingCell");
        });
    });

});

Disabled inputs in bootstrap. How to apply it to a different TAG?

4 Answers4