jquery - ボタンがクリックされたときに列内のすべてのチェックボックスを無効にする方法

Question

私はjqueryに関しては初心者であり、私の問題に混乱しています。基本的に私がする必要があるのは、ボタンがクリックされたとき、その列内のすべてのチェックボックスを無効にする必要があります。つまり、チェック/チェックを外すことはできません。私はこの投稿を検索して、私の問題に最も近い投稿を見つけましたが、彼はjqueryの使用と、彼の擬似コードのみを提供するという点ですでに進んでいます。

誰かが私の問題を手伝ってくれますか？以下は私のコードです：

<table id="key_table" border="3">
    <thead>
        <tr>
            <th>
                Month 1<button id="1" class="lockButton">Lock</button><br>2013-01-01 to 2013-01-31<br>
                <table style="width: 250px;">
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;">1</td>
                            <td style="text-align:center;">2</td>
                            <td style="text-align:center;">3</td>
                            <td style="text-align:center;">4</td>
                        </tr>
                    </tbody>
                </table>
            </th>
            <th>
                Month 2 <button id="2" class="lockButton">Lock</button><br>2013-02-01 to 2013-02-28<br>
                <table style="width: 250px;">
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;">1</td>
                            <td style="text-align:center;">2</td>
                            <td style="text-align:center;">3</td>
                            <td style="text-align:center;">4</td>
                        </tr>
                    </tbody>
                </table>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input checked="checked" style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="even">
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" onclick="javascript: update_key_type(456905, 1, 1, this)" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input checked="checked" style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

こちらのJSFiddleでも確認できます

Answer 1

まず、インラインCSSを使用しないでください。これは恐ろしく、コードが読めなくなります。クラスとIDを使用して、スタイルシートでスタイルを定義します。

次に、<td>出身月にクラスを追加します。ボタンのIDは、行番号を示します。次に、次の名前のクラスを追加します。class='monthX'たとえばclass=month1

次に、このjQueryをリンクします

$(document).ready(function() {

    $("button").click(
    function () {
        var id = $(this).attr("id");
        $(".month"+id+" input[type=checkbox]").attr('disabled', 'disabled');
    }); 

});

更新されたフィドル

Answer 2

何かのようなもの ：

$('.lockButton').on('click', function() {
  $('#key_table > tbody > tr').find('input[type="checkbox"][class$="'+this.id+'"]')
                              .prop('disabled', true);
});

フィドル

ポイントが無効状態を切り替えることであったかどうかはわかりませんが、とにかく：

$('.lockButton').data('locked', false).on('click', function() {
    var cl  = this.id,
        lc  = $(this).data('locked');
    $(this).data('locked', !lc);
    $('#key_table > tbody > tr').find('input[type="checkbox"][class$="'+cl+'"]')
                                .prop('disabled', !lc);
});

フィドル

Answer 3

私はあなたのフィドルをフォークして解決策を示しました。基本的に、各ロックボタンについて、次のことを行います。

1. アクションがロックまたはロック解除のどちらであるかを記録します（トグル動作の方が理にかなっていると思います）。
2. このボタンが影響するすべてのチェックボックスをつかみます（下のコードについて詳しく説明しました—少し粘着性があります）。
3. そして、クリックすると、＃1で作成したレコードを切り替えます...
4. そして、それをdisabled＃2で保存したすべてのチェックボックスの属性に適用します。

このコードはindex、親ヘッダーのを取得します。これにより、列が得られます。

var column      = $(this).closest('th').index();

次に、その列のセルをテーブル内の最初のtbodyのすぐ内側に配置します（ネストされたテーブルがあるため、これは複雑にする必要がありました）

var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (column + 1) + ')').find('[type=checkbox]');

デモ

http://jsfiddle.net/barney/B9h2v/

Answer 4

あなたはこれを試すことができます：

$(function() {
    $('#key_table input:checkbox').click(function() {
        if($(this).is(':checked')) {
            $(this).parent().parent().find('input:checkbox').attr('disabled',true);
            $(this).removeAttr('disabled');
        } else {
            $(this).parent().parent().find('input:checkbox').removeAttr('disabled');
        }
    });
});

うまくいけば、それはあなたのニーズに合うでしょう

乾杯、

テレンス。

Answer 5

多分これはあなたを助けるかもしれません：

デモ

$("#1").click(function(){
    $("input.kw_460853mo_1").attr("disabled", true);
    $("input.kw_456905mo_1").attr("disabled", true);
});

$("#2").click(function(){
    $("input.kw_460853mo_2").attr("disabled", true);
    $("input.kw_456905mo_2").attr("disabled", true);
});

Answer 6

無効にする行に共通のクラスを追加します。ここでは、クラス名として「month1」、「month2」を付けています。次に、対応するクラスの入力フィールドを無効にします。

サンプル

.
.
 <tr class="odd month1">  
<td><input checked="checked" type="checkbox"></td>
<td ><input type="checkbox"></td>
</tr>
.
.

 $("#1").click(function(){
    $(".month1 input").attr("disabled", true);
    })

http://jsfiddle.net/arjuncc/zXqCE/16/