Question

渴望：用户只能点击显示的3个复选框中的2个;当用户点击复选框时，复选框背景变为橙色。

目前：所选的第一个复选框根据需要进行操作。第二个复选框勾选，但不会更改背景颜色。再次单击时，它取消勾选并更改为所需的背景颜色（但未选中）。第三个复选框不可选，而两个已被选中。

请求：帮助实现所需，谢谢！

代码：

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
    this.checked = false;
    }
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected < selectableFriends) {
    $(this).closest("li").toggleClass("checked");
    }
});

Answer 1

$('input.playerCheckbox').on('change', function(event) {
  var selectableFriends = 2;
  if($('.playerCheckbox:checked').length > selectableFriends) {
    this.checked = false;
  }
  $(this).closest("li").toggleClass("checked", this.checked);
});

执行您想要的稍微清洁的实现。查看JSFiddle

Answer 2

试试这个：

$('input.playerCheckbox').on('change', function (event) {
    var selectableFriends = 2;
    if ($('.playerCheckbox:checked').length > selectableFriends) {
        this.checked = false;
    } else {
        $(this).closest("li").toggleClass("checked");
    }
    numberCurrentlySelected = $('.playerCheckbox:checked').length;
});

请在此处查看：JSFIDDLE

Answer 3

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
var numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected > selectableFriends) {
    this.checked = false;
    }

if(numberCurrentlySelected <= selectableFriends) {
    $(this).closest("li").toggleClass("checked");
    }
});

我刚刚将第二部分改为＆lt; =而不是＆lt;然后在之前创建numberCurrentlySelected变量，这样就不会多次调用查询。 Caeths更好，但不是使用第二个if语句，它只是使用了else，有意义并且摆脱了比较。

Answer 4

DEMO

 $('input.playerCheckbox').on('change', function(event) {
        var selectableFriends = 2;
        numberCurrentlySelected = $('.playerCheckbox:checked').length;
        if(numberCurrentlySelected <= selectableFriends) {
            $(this).closest("li").toggleClass("checked");
            }
        if($('.playerCheckbox:checked').length > selectableFriends) {
            this.checked = false;
            $(this).closest("li").removeClass('checked');
        }
  });

Answer 5

这适用于Fiddler。

$('.playerCheckbox').change(function() {

    if($('.playerCheckbox:checked').length > 2) {this.checked = false; }
    else{
        if( this.checked == true ) {$(this).closest("li").addClass("checked");}
        if( this.checked == false ) {$(this).closest("li").removeClass("checked");}
    }

});

使用复选框更改背景颜色，可选择有限数量的复选框

5 个答案: