2016-11-08 7 views
2

以下は、すべてのチェックボックスをチェックするためのコードです。checkAllをクリックするとチェックボックスが無効になるのを防ぐ

jQuery("#checkAll").on('click',function() { // bulk checked 
      var status = this.checked; 
      jQuery(".selectRow").each(function() { 
       jQuery(this).prop("checked",status); 
      }); 
     }); 

しかし、既に無効になっているチェックボックスは、CheckAllリンクをクリックするとチェックされます。 checkAllのリンクをクリックしたとき、既に無効になっているチェックボックスをチェックするのを止めるには?どんな助けでも大歓迎です。

答えて

2

あなたはほとんどそこにいます。現在のコードでnot( ":disabled")フィルタを使用すると、無効になっているチェックボックスは削除されます。

jQuery(".selectRow").not(":disabled")... 

非常に似ています、この質問を参照してください:あなたは[disabled]属性を持たないすべてのcheckboxを選択するように:notセレクタを使用することができますjquery selector for all checked checkboxes that are not disabled

+0

パーフェクト、好きなように動作します。ありがとう – user3408779

4

を:

$('#checkAll').on("click", function(event){ 
 
    $('input[type="checkbox"]:not([disabled])').prop('checked', true) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" /><br /> 
 
<input type="checkbox" disabled="disabled" /><br /> 
 
<input type="checkbox" /><br /> 
 
<input id="checkAll" type="button" value="check all" />

0

どのように動作するかの簡単な例全体のDOMツリーの上に第二の時間を避けるために、変数に同じjQueryのセレクターを割り当てることが優れていることを

<!DOCTYPE html> 
<html lang="en"> 
<html> 
<head> 
    <title>Test</title> 
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript"> 
     jQuery(document).ready(doReady); 

     function doReady() 
     { 
      jQuery('#checkAll') 
        .on("click", 
          function (event) { 
           var $that = null; 
           event.preventDefault(); 
            jQuery.each(jQuery(".selectRow"), 
              function (index, value) { 
               $that = jQuery(value); 
               if (!$that.is(':checked') && !$that.is(":disabled")) { 
                jQuery(this).attr("checked", "checked"); 
               } 
              } 
            ); 
          } 
         ); 
     } 
    </script> 
</head> 
<body> 
    <button id="checkAll" name="checkAll">check</button> 
    <input type="checkbox" class="selectRow" /> 
    <input type="checkbox" class="selectRow" /> 
    <input type="checkbox" class="selectRow" /> 
    <input type="checkbox" class="selectRow" /> 
    <input type="checkbox" class="selectRow" /> 
    <input type="checkbox" class="selectRow" disabled="disabled" /> 
</body> 
</html> 

注ね。

また、コード例で中括弧が欠落していることにも注意してください。

関連する問題