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/

Solution 1

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.

Solution 2

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.

Comments

[Lorraine Bernard]

+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.