所有選擇的複選框

我有一個複選框的動態列表，所有的都是同一個類。我想要禁用「提交」按鈕，直到選中「group1」類中的所有複選框。所有選擇的複選框

我也只想做這個，當這個類出現在頁面上時。我是這樣做的那部分：

<input type="checkbox" class="group1" value="20" /> 
<input type="checkbox" class="group1" value="15" /> 
<input type="checkbox" class="group1" value="14" /> 

if ($(".group1").length > 0) { 
//run below code 
}

於是我開始喜歡這個，但我不確定時，選擇該類的所有複選框怎麼知道。

$(document).ready(function() { 
    $(':input[type="submit"]').prop('disabled', true); 
    $('input[type="text"]').keyup(function() { 

    var checkboxes = $('.group1'); 
     if($(this).is(':checked')) { 
      //if all chekced, enable submit button 
      $(':input[type="submit"]').prop('disabled', false); 
     } else { 
     $(':input[type="submit"]').prop('disabled', true); 
     } 

    } 
    }); 
});

我已經看到了這jQuery Array of all selected checkboxes (by class)，但作爲類可以是任何長度的，我不知道如何檢查所有被選中。

來源

2017-08-09 Blawless

你可以簡單地檢查這個樣子，複選框的總數和選中的複選框的總數：

if ($('.group1').length == $('.group1:checked').length) { 
    // all are checked... 
    $(':input[type="submit"]').prop('disabled', false); 
} else { 
    $(':input[type="submit"]').prop('disabled', true); 
}

來源

2017-08-09 10:47:48

要做到這一點，最簡單的辦法就是複選框的總數比較，這是檢查的數量，像這樣：

var $group = $('.group1'); 
$(':input[type="submit"]').prop('disabled', $group.length != $group.filter(':checked').length);

來源

2017-08-09 10:49:08

var selected = $(".group1:checked").length;

計數複選框至極進行檢查。

來源

2017-08-09 10:53:09 Schnatti

你可以擴展它來顯示它如何能幫助OP？這似乎是答案的一半 –

我認爲Blawless有80％的答案，只有一小部分不存在。你的回答看起來很聰明...... – Schnatti

首先，您需要將事件綁定到複選框，以便每次更改狀態以重新運行檢查以啓用或禁用按鈕;

然後你就可以檢查是否所有複選框被選中比較您的羣的長度VS您的組通過:checked僞選擇

並更改提交按鈕的狀態過濾的長度，你可以使用.prop方法，接受屬性和該屬性的狀態作爲第二個參數。所以：

$group1 = $(".group1"); 
 
$submit = $('[type=submit]'); 
 
if ($group1.length > 0) { 
 
    $group1.on('change', checkBoxes) 
 
} 
 

 
function checkBoxes(){ 
 
    var $checked = $group1.filter(':checked'); 
 
    $submit.prop('disabled', $group1.length != $checked.length); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="group1" value="20" /> 
 
<input type="checkbox" class="group1" value="15" /> 
 
<input type="checkbox" class="group1" value="14" /> 
 
<input type="submit" disabled>

來源

2017-08-09 11:14:40

所有選擇的複選框

回答

相關問題