Jquery如何计数检查和禁用复选框

我试图禁用所有未经检查的复选框时，有5复选框。Jquery如何计数检查和禁用复选框

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

来源

2011-08-05 Rails beginner

请你的代码添加到这个问题为好。对于将来如果jsfiddle消失，这个问题仍然是相关的。 –

您提供的js小提琴只需传入代码，然后再次不再检查。尝试获取所有复选框并添加.click属性并重新评估检查计数。 –

countcheckhed拼写错误。 – Narnian

以下应为您的需求做的伎俩：

$("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

来源

2011-08-05 18:26:30

如何启用所有复选框，当6个复选框之一未选中时？ –

else语句处理:)你可以检查第一个例子 –

非常感谢！完美的例子。 – Drako

我猜你想禁用的复选框，一旦休息检查复选框计数得到超过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 {} 
});

来源

2011-08-05 18:32:56 Chandu

“> 5”部分将允许选择6个复选框。 – brezanac

@holodoc：错过了'有5个复选框'部分的问题，并且使用了OP的原始代码。修正它 – Chandu

大声笑它的有趣，看这些人后，他们是如何改变他们的解决方案：D – brezanac

看看这

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

来源

2011-08-05 18:33:33 ShankarSangoli

你的代码是接近，有以下几个主要问题。

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。

当您真正需要filter时，您正在使用find。 Find会搜索你设置的元素的后代，你想过滤它们。

你有> 5当你说你想禁用AT 5.所以它应该是>=。

您正在禁用所有复选框，而不仅仅是您声明的未选中状态，我添加了.not(":checked")。

最后，我想你可能会想重新启用他们，如果一个是选中的，所以我说：

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

来源

2011-08-05 18:34:28

$(':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 <的情况下1.6使用attr。

来源

2011-08-05 18:35:59 brezanac

$('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/

注意：如果取消选择五个一此代码将使复选框！

来源

2011-08-05 18:36:00

不，它不会。它将允许选择6个复选框。 – brezanac

$("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/

来源

2011-08-05 18:36:20 RobB

Jquery如何计数检查和禁用复选框

回答

相关问题