Блог

Не могу разобраться в этом, пытаясь не только отключить остальные флажки после выбора двух, но и изменить границу вокруг «checkbox_group» с черного на красный

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>
  

Вам просто нужно изменить оператор if на equal 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>