Question

所以，我有六个复选框，其中一个被默认选中。用户一次只能检查两个复选框，这样可以正常工作。但是，如果选中默认复选框，则不应检查其他复选框。这就是给我带来问题的原因。我找到了this post，并尝试从那里开始工作。

因此，我有5个关于类other的复选框和一个标识为default的复选框。我的问题是，当没有其他人被检查时，我无法检查default。

这是一个带有代码的JSFiddle - 你们能不能把我推向正确的方向？

这是我的代码：

HTML：

<input type="checkbox" group="checkboxes" name="other" class="other" id="one">
  <label for="one">One</label><br />
<input type="checkbox"  group="checkboxes" name="other" class="other" id="two">
  <label for="two">Two</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="three">
  <label for="three">Three</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="four">
  <label for="four">Four</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="five">
  <label for="five">Five</label><br />
<input group="checkboxes" type="checkbox" checked="checked" name="other" id="default">
  <label for="default">Default</label>

jQuery的：

$('.other').change(function(){
    var c = this.checked ? false : true;
    $('#default').attr('checked', c);
});

$(document).ready(function(){
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function(){
        var bol = $("input:checked").length >= maxaids;
        $("input[type=checkbox]").not(":checked").attr("disabled",bol);
    });
});

Answer 1

您只需要检查检查了类other的复选框的数量。如果没有，请选中default复选框：

$('#default').prop('checked', !$('.other').filter(':checked').length);

Here's a fiddle

Answer 2

试试这个，

$(document).ready(function () {
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function () {
        if (this.id == "default") {
            var bol = $(this).is(":checked");
            $("input[type=checkbox]").not(this).attr("disabled", bol).attr("checked", false);
        } else {
            var bol = $("input:checked").length >= maxaids;
            $("input[type=checkbox]").not(":checked").attr("disabled", bol);
        }
    });
});

http://jsfiddle.net/kLMcZ/2/

的更新 的

$(document).ready(function () { var maxaids = "2"; $(document).on('click', "input[type=checkbox]", function () { if (this.id == "default") { var bol = $(this).is(":checked"); $("input[type=checkbox]").not(this).attr("disabled", bol).attr("checked", false); } else { var bol = $("input:checked").length >= maxaids; $("input[type=checkbox]").not(":checked").attr("disabled", bol); if ($("input:checked").length == 0) { $("#default").click(); } } }); });

查看更新的小提琴， http://jsfiddle.net/kLMcZ/16/

Answer 3

使用prop检查复选框

Demo

$('.other').change(function(){
    var c = this.checked ? false : true;
    $('#default').attr('checked', c);
});

$(document).ready(function(){
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function(){

        var checkcount = $("input:checked").length;
        var bol = checkcount >= maxaids;
        $("input[type=checkbox]").not(":checked").attr("disabled",bol);
        if(checkcount == 0){
            console.log(checkcount);
            $('#default').prop('checked', true);

        }
    });
});

Answer 4

var maxaids = "2";
$(document).on('click', "input[type=checkbox]", function(){

    var bol = $("input:checked").length >= maxaids;

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

    var checkCount = $('input[type=checkbox]')
                         .not('#default')
                         .filter(function(i, el){
                             return el.checked;
                         }).length;

    $('#default').prop('checked', checkCount > 0);
});

Answer 5

我的2美分:(你的答案的其余部分保持不变，因此未在此明确报告）

$('.other').change(function(event){
    var boll = $("input:checked").length === 0;
    var c = this.checked ? false : true;
    $('#default').attr('checked', c);
//just check how many are checked, after you have applied the rest of your logic 
    if(boll) {    
//best to use 'prop' here, attr doesn't do the trick
        $('#default').prop('checked', true);}
});

JSFiddle

通过选中其他复选框取消选中复选框

5 个答案:

Here's a fiddle