Bootstrap中的禁用输入.如何将其应用于其他标签

Question

通过在输入上使用 disabled属性可以防止用户输入并触发略有不同的外观。
这是演示http://jsfiddle.net/d2rlr/3023/

让我们假设我想将相同的样式应用于其他标签，例如表。
实际上，我正在使用handsontable生成Excel-like data grid editor。
如何在以下上下文中应用disabled attribute（像表一样标记）？

这是使用handsontable和bootstrap http://jsfiddle.net/d2rlr/3025/

Answer 1

您无法应用Bootstrap的现有input[disabled]样式，但是您可以添加新的CSS，可以准确地模仿样式。

例如：

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

显然，这不包括您的阅读逻辑，并且在您的小提琴中看起来有些怪异（因为列和行标头是相同的颜色），但这是它的要点。

Answer 2

在此处检查：

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

有.readOnly单元属性 - 使用它！

HTML输入还具有readonly属性，不仅disabled属性，其行为之间存在一些相当大的差异。

Answer 3

boostrap仅根据其残疾属性来造成输入，例如：

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

因此，您将无法使用Bootstrap来做到这一点，因为表没有此类属性。

您应该使用各种插件或滚动。

Answer 4

也许这可以帮助...更改单元格的外观，您可以在其上进行编辑。

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>[e-mail]</td>
            <td>(21) 9999-8888</td>
        </tr>
        <tr>
            <td>002</td>
            <td>Maria Silva</td>
            <td>[e-mail]</td>
            <td>(81) 8787-8686</td>
        </tr>
        <tr>
            <td>003</td>
            <td>José Pedro</td>
            <td>[e-mail]</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");
        });
    });
});