jQuery如何计数已选中和禁用复选框 [英] Jquery how to count checked and disable checkboxes

问题描述

当有5个选中的复选框时，我试图禁用所有未选中的复选框.

I am trying to disable all unchecked checkboxes when there are 5 checked checkboxes.

我的代码在这里不起作用，它是: http://jsfiddle.net/mtYtW/18/

My code is not working here it is: http://jsfiddle.net/mtYtW/18/

我的Jquery:

var countchecked = $('table input[type="checkbox"]').find(":checked").length

    if(countcheckhed > 5) {
        $("table input:checkbox").attr("disabled", true);
    } else {}

我的HTML:

<table cellspacing="0" cellpadding="0" width="770px;">
  <tbody><tr style="border: 1px solid green; height: 40px; font-size: 14px;">
    <th>Feature 1</th>
    <th>Feature 2</th>
    <th>Feuture 3</th>
  </tr>

  <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
</tbody></table>

推荐答案

以下应满足您的需要:

$("table input[type=checkbox]").click(function(){
var countchecked = $("table input[type=checkbox]:checked").length;

if(countchecked >= 5) 
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",true);
}
else
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",false);
}

});

满足您需求的示例

(通用)，以下内容将禁用您所有未选中的复选框:

$('input[type=checkbox]').not(':checked').attr("disabled","disabled");

通用禁用示例

这篇关于jQuery如何计数已选中和禁用复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！