18

次のスクリプトを使用して、特定のクラスのすべてのチェックボックスを選択しています。

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').trigger("change");
    });

});

ただし、[すべて選択解除]チェックボックスで無効になっているチェックボックスを選択解除/選択できるため、問題が発生します。

私はこれを試しました

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').trigger("change");
    });

});

しかし、それは機能しません。問題を紹介するためにjsfiddleを作成しましたhttp://jsfiddle.net/e67Fv/

4

4 に答える 4

34

うーん...興味深い試みですが、セレクターは単なる文字列であるため、セレクター内でjQueryオブジェクトを使用することはできません。

無効な要素を除外するためのセレクターは:not(:disabled)、であるため、コードは次のようになります。

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");
  });
});

呼び出しを連鎖させることができるため、アイテムを2回選択する必要がないことに注意してください。

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked")).trigger("change");
  });
});
于 2012-07-12T17:29:01.577 に答える
12

.not()これらを除外するには、関数と:disabledセレクターの組み合わせを使用します。

$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').prop("checked", $(this).prop("checked"));
$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').trigger("change");

.not()セレクターとしても存在し、:not()次のように使用できます。

 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");
于 2012-07-12T17:15:31.277 に答える
4

これが私が通常行うことです：

$(function(){
    $(".selectall").live('change', function(){
        if($(this).is(":checked"))
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "true");
        }
        else
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "false");
        }
    });
});

お役に立てば幸いです:)

于 2012-07-12T17:19:47.303 に答える
2

これは、元のコードと同じことはしません。変更されなかったものに対してのみ変更をトリガーします。私はあなたが変更したらすべての変更をトリガーしたいと思ったと思います

$(':checkbox.selectall').on('click', function(){
        $(':checkbox .'+ $(this).data('checkbox-name')).not(':disabled').prop("checked", $(this).prop("checked")).trigger("change");
    });
于 2012-07-12T17:27:49.497 に答える