2

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

所以，我有 5 个带有 class 的other复选框和一个带有 id的复选框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);
    });
});
4

5 回答 5

3

您只需要检查选中了多少个该类other的复选框。如果没有，请default选中复选框：

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

这是一个小提琴

于 2013-06-27T07:47:17.393 回答
1

试试这个，

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

于 2013-06-27T07:41:13.727 回答
0

用于prop检查复选框

演示

$('.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);

        }
    });
});
于 2013-06-27T07:48:32.367 回答
0 
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);
});
于 2013-06-27T08:00:41.740 回答
0

我的 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

于 2013-06-27T08:10:29.523 回答