Question

无法理解这一点，尝试不仅在选择了两个复选框后禁用其余复选框，而且还要围绕＆＃34; checkbox_group＆＃34;从黑色到红色

javascript是：

$(document).ready(function() {
$(".cbox").on("click", function(){
var numberOfChecked = $('input.cbox:checkbox:checked').length;
if (numberOfChecked === 3){
$(this).prop('checked', false);
$("#checkbox_group").css({"border-color":"red"});
} else {
$("#checkbox_group").css({"border-color":"black"});
}
//console.log(numberOfChecked); // debugging
});
});

有问题的div的样式是：

#checkbox_group{
    border: solid black 1px;               
}

HTML：

<div id="checkbox_group">
    <label>Sports</label>
    <input type="checkbox" class="cbox" name="Sports" value="Sports" ><br>
    <label>News</label>
    <input type="checkbox" class="cbox" name="News" value="News" ><br>
    <label>Entertainment</label
    ><input type="checkbox" class="cbox" name="Entertainment" value="Entertainment" ><br>
    <label>Music</label>
    <input type="checkbox" class="cbox" name="Music" value="Music" >
</div>

Answer 1

您只需将if语句更改为等于2而不是3。然后，您需要检查复选框并找到尚未检查的复选框。

$(document).ready(function() {
$(".cbox").on("click", function(){
var numberOfChecked = $('input.cbox:checkbox:checked').length;
if (numberOfChecked === 2){
  $(this).prop('checked', true);
  $(".cbox").each(function(){
    if ($(this).prop('checked') != true){ 
        $(this).attr("disabled", true);
    }
  });
  $("#checkbox_group").css({"border-color":"red"});
} else {
  $("#checkbox_group").css({"border-color":"black"});
  $(".cbox").each(function(){
    if ($(this).attr('disabled') == "disabled"){ 
        $(this).attr("disabled", false);
    }
  });
}
});
});

#checkbox_group{
    border: solid black 1px;               
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkbox_group">
    <label>Sports</label>
    <input type="checkbox" class="cbox" name="Sports" value="Sports" ><br>
    <label>News</label>
    <input type="checkbox" class="cbox" name="News" value="News" ><br>
    <label>Entertainment</label
    ><input type="checkbox" class="cbox" name="Entertainment" value="Entertainment" ><br>
    <label>Music</label>
    <input type="checkbox" class="cbox" name="Music" value="Music" >
</div>

选中2个复选框时更改边框颜色（并禁用其余复选框）

1 个答案: