web-dev-qa-db-ja.com

ブートストラップの入力を無効にしました。別のTAGに適用するにはどうすればよいですか？

入力にdisabled属性を使用することで、ユーザー入力を防ぎ、わずかに異なる外観をトリガーすることができます。
これがデモです http://jsfiddle.net/D2RLR/3023/

同じスタイルをテーブルのような別のTAGに適用したいとします。
実際、私はhandsontableを使用してExcel-like data grid editorを生成しています。
次のコンテキスト（テーブルのようなタグ）でdisabled attributeを適用するにはどうすればよいですか？

これはhandsontableとbootstrapを使用したデモです http://jsfiddle.net/D2RLR/3025/

javascriptjquerycsstwitter-bootstraphandsontable
7
Lorraine Bernard

ここをチェックしてください：

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

有る .readOnlyセルプロパティ-使用してください！

HTML入力には、readonlyプロパティだけでなく、disabledプロパティもあり、動作にはかなりの違いがあります。

6
Reflective

Bootstrapの既存のinput[disabled]スタイルを適用することはできませんが、スタイルを正確に模倣する新しいCSSを追加することはできます。

例えば：

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

明らかに、これには読み取り専用ロジックは含まれていません。 フィドルでは少し奇妙に見えます （列ヘッダーと行ヘッダーが同じ色であるため）が、それが要点です。

6
Sara

Boostrapは、次のような無効な属性に基づいて入力のスタイルを設定するだけです。

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

したがって、テーブルにはそのような属性がないため、bootstrapを使用してこれを行うことはできません。

ある種のプラグインを使用するか、独自のプラグインをロールする必要があります。

0
mfreitas

多分これは役立つかもしれません...セルの外観を変更し、あなたはそれを編集することができます。

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

});
0
user3112550