Question

我正在尝试禁用所有未选中的复选框，当有5个选中的复选框时。

我的代码在这里不起作用：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>

Answer 1

以下内容可以满足您的需求：

$("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);
}

}）;

Example for your needs

（通用）以下内容将禁用所有未经检查的复选框：

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

Generic Disable Example

Answer 2

$('table input[type="checkbox"]').click(function(){
    var countcheck = $('table input[type="checkbox"]:checked').length;
    if(countcheck > 4) {
        $("table input:checkbox:not(:checked)").attr("disabled", true);
    }else
    {
        $("table input:checkbox").attr("disabled", false);
    }
});

工作示例：http://jsfiddle.net/mtYtW/48/

注意：如果您取消选择五个中的一个，此代码将启用复选框！

Answer 3

你的代码很接近，有一些重大问题。

http://jsfiddle.net/mtYtW/37/

$(function() {
    $('table input[type="checkbox"]').change(function() {
        var countchecked = $('table input[type="checkbox"]').filter(":checked").length

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

最大的，你的代码只执行onload。您需要在选中其中一个复选框时执行它，即此部分：

$('table input[type="checkbox"]').change(function() {

您有一个拼写错误的变量名称countcheck不存在，它是countchecked。

当您真正想要find时，您正在使用filter。查找将搜索集合中元素的后代，您想要过滤它们。

当您声明要禁用AT 5时，您已> 5。因此它应为>=。

您正在禁用所有复选框，而不是按照您的说明取消选中，我添加了.not(":checked")。

最后，我想你可能想要重新启用它们，如果一个未经检查，所以我补充道：

}else{
    $("table input:checkbox").attr("disabled", false);
}

Answer 4

我猜你想要在复选框的计数超过5后禁用其余的复选框。如果是这样的话，试试这个：

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

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

工作示例：http://jsfiddle.net/mtYtW/30/

如果要禁用页面加载上的复选框并验证是否有超过5个复选框已选中，请尝试以下操作：

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

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

Answer 5

看看这个

http://jsfiddle.net/mtYtW/33/

Answer 6

$(':checkbox').bind('click', function(){
    if($(':checkbox:checked').length >= 5) {
        $(':checkbox').not(':checked').prop('disabled', true);
    } else {
        $(':checkbox').not(':checked').prop('disabled', false);
    }
});

请注意prop是jQuery 1.6独有的。在jQuery的情况下＆lt; 1.6使用attr。

Answer 7

$("table input[type=checkbox]").click(function(){
    var countchecked = $("table input[type=checkbox]:checked").length;
    if(countchecked >= 5) {
        $("table input:checkbox").attr("disabled", true);
    }else{

    }
});

工作示例：http://jsfiddle.net/Re5uy/6/

Jquery如何计算选中和禁用复选框

7 个答案: