使用Jquery

Question

如何在选中限制复选框后禁用复选框？ 我想创建两种不同的形式，其中第一种形式的用户只能检查3个复选框，剩余的复选框应该被禁用，而在第二种形式中，只能选择两个复选框，剩下的应该禁用。

Answer 1

这是一个应该做你想要的简单片段。只需调整表单上的自定义属性data-checksallowed即可处理任意数量的允许复选框。

$('[data-checksallowed]').on("change", 'input[type="checkbox"]', function() {
  var parent = $(this).closest("[data-checksallowed]");
  var checksallowed = parent.data('checksallowed');
  var checkboxes = parent.find('input[type="checkbox"]');
  var checkedboxes = checkboxes.filter(':checked');
  var uncheckedboxes = checkboxes.not(checkedboxes);
  
  if (checkedboxes.length == checksallowed)
    uncheckedboxes.prop('disabled', true);
  else
    uncheckedboxes.prop('disabled', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form data-checksallowed="3">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</form>
<form data-checksallowed="2">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</form>

Answer 2

这样的东西对你有用。

<div id="chks">
<input type="checkbox" value="1" /> 1
<input type="checkbox" value="2" /> 2
<input type="checkbox" value="3" /> 3
<input type="checkbox" value="4" /> 4
<input type="checkbox" value="5" /> 5
<input type="checkbox" value="6" /> 6
<input type="checkbox" value="7" /> 7
<input type="checkbox" value="8" /> 8
</div>

javascript将如下所示：

$('#chks input[type="checkbox"]').click(function(){
    // get the count of all checked boxes
    var cnt = $('#chks input[type="checkbox"]:checked').length;
    if(cnt == 3){
        // if cnt is equal to 3 disable all checkboxes that are NOT checked
        // you want to leave the checked ones enabled
        $('#chks input[type="checkbox"]').not(':checked').attr('disabled', 'disabled');
    }else{
        // if count is not equal to 3 make sure the unchecked are enabled
        // count should never be more than 3 because this will disable them
        $('#chks input[type="checkbox"]').not(':checked').removeAttr('disabled');
    }

});