单击div时如何限制所选复选框的数量

Question

我试图在单击div时选中复选框。但是我想限制可以选择的复选框数量。这是我的html代码。

        $('.block').click(function () {
       $(this).find('input[type=checkbox]').prop("checked", 
    !$(this).find('input[type=checkbox]').prop("checked"));
       $(this).css('border', '3px solid black');
    });



    $('input[type=checkbox]').change(function(){
       if ($('input[type=checkbox]:checked').length > 3) {
        $(this).prop('checked', false)
        alert("allowed only 3");
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-3">
          <div class="block">
              <input type="checkbox" class="cb-element" value="1" />
              <img src="assets/img/products/1.jpg" alt="">
          </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="2" />
              <img src="assets/img/products/1.jpg" alt="">
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="3" />
              <img src="assets/img/products/1.jpg" alt="">
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="4" />
              <img src="assets/img/products/1.jpg" alt=""> 
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="5" />
              <img src="assets/img/products/1.jpg" alt="">
               
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="6" />
              <img src="assets/img/products/1.jpg" alt="">    
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
           <input type="checkbox" class="cb-element" value="7" />
              <img src="assets/img/products/1.jpg" alt="">           
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
           <input type="checkbox" class="cb-element" value="8" />
              <img src="assets/img/products/1.jpg" alt="">
           </div>
        </div>

但是它不起作用。谁能帮我。这个答案我也可以从下面的问题中得出。

How to limit the number of selected checkboxes?

Answer 1

看看这个。您的块突出显示和复选框选择不同步。 在父块中添加了限制逻辑。希望这会有所帮助！

$('.block').click(function () {

   $(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
   
    if($(this).find('input[type=checkbox]').prop("checked"))
   $(this).css('border', '3px solid black'); 
   else
   $(this).css('border', '');
   
       if ($('input[type=checkbox]:checked').length >3) {
        $(this).children(0).prop('checked', false) ;               $(this).css('border','' );            
        alert("allowed only 3");    
       }
    
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-3">
          <div class="block">
              <input type="checkbox" class="cb-element" value="1" />
              <img src="assets/img/products/1.jpg" alt="">
          </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="2" />
              <img src="assets/img/products/1.jpg" alt="">
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="3" />
              <img src="assets/img/products/1.jpg" alt="">
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="4" />
              <img src="assets/img/products/1.jpg" alt=""> 
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="5" />
              <img src="assets/img/products/1.jpg" alt="">
               
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
            <input type="checkbox" class="cb-element" value="6" />
              <img src="assets/img/products/1.jpg" alt="">    
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
           <input type="checkbox" class="cb-element" value="7" />
              <img src="assets/img/products/1.jpg" alt="">           
           </div>
        </div>
        <!-- end pro block -->
        
        <div class="col-xs-3">
          <div class="block">
           <input type="checkbox" class="cb-element" value="8" />
              <img src="assets/img/products/1.jpg" alt="">
           </div>
        </div>

Answer 2

更新

我自己也不明白为什么会这样发生，如果有人可以向我解释一下，但同时向复选框和div元素添加了click事件，我将不胜感激，我注意到click事件是在复选框上触发的第一。在该功能中，我覆盖了单击复选框时的默认行为。这样，当触发div元素上的click事件时，该复选框的行为就像未更改一样，并且代码按预期工作。如果仍有任何意外行为，请通知我。
另外，对于边框，选中复选框时需要边框。因此，我添加了一个条件块来设置边框。

旧

仅当您单击复选框时才会触发“更改”事件，而不是单击整个div元素。

即使您单击身体上的某个位置也要发出警报，请不要使用更改功能。而是使用点击功能放置逻辑。

更新代码

/*
$('.block').click(function () {
  let checkbox = $(this).find('input[type=checkbox]');
  let val = checkbox.prop("checked");
  checkbox.prop("checked", !val);
  $(this).css('border', '3px solid black');
  if ($('input[type=checkbox]:checked').length > 3) {
     checkbox.prop('checked', false)
     alert("allowed only 3");
  }
});
*/

$('.block').click(function(event) {

  let checkbox = $(this).find('input[type=checkbox]');
  let val = checkbox.prop("checked");
  checkbox.prop("checked", !val);
  if ($('input[type=checkbox]:checked').length > 3) {
    checkbox.prop('checked', false)
    return alert("allowed only 3");
  }
  if (checkbox.prop("checked")) {
    $(this).css('border', '1px solid #eee');
  } else {
    $(this).css('border', '');
  }

});


$('input[type=checkbox]').click(function(event) {
  $(this).prop("checked", !$(this).prop("checked"));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="1" />
      <img src="assets/img/products/1.jpg" alt="ALT">
    </div>
  </div>
  <!-- end pro block -->

  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="2" />
      <img src="assets/img/products/1.jpg" alt="ALT">
    </div>
  </div>
  <!-- end pro block -->

  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="3" />
      <img src="assets/img/products/1.jpg" alt="ALT">
    </div>
  </div>
  <!-- end pro block -->

  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="4" />
      <img src="assets/img/products/1.jpg" alt="ALT">
    </div>
  </div>
  <!-- end pro block -->

  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="5" />
      <img src="assets/img/products/1.jpg" alt="ALT">

    </div>
  </div>
  <!-- end pro block -->

  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="6" />
      <img src="assets/img/products/1.jpg" alt="ALT">
    </div>
  </div>
  <!-- end pro block -->

  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="7" />
      <img src="assets/img/products/1.jpg" alt="ALT">
    </div>
  </div>
  <!-- end pro block -->

  <div class="col-xs-3">
    <div class="block">
      <input type="checkbox" class="cb-element" value="8" />
      <img src="assets/img/products/1.jpg" alt="ALT">
    </div>
  </div>

</div>

Answer 3

我在选中复选框时发现了问题。我修复并正常工作。只需更改代码的这一部分：

 $('.block').click(function () {
       $(this).find('input[type=checkbox]').prop("checked", 
    !$(this).find('input[type=checkbox]').prop("checked"));
       $(this).css('border', '3px solid black');
    });

与此：

 $('.block').click(function () {
   $(this).find('input[type=checkbox]').prop("checked") 
   $(this).css('border', '3px solid black');

希望获得帮助：

更新

：

  

完全删除您的change方法。代替那一部分，编辑   脚本的第一部分是这样的：

   $('.block').click(function () {

       if($(this).find(".cb-element").prop("checked") == true)
       {
            $(this).find(".cb-element").prop('checked', false);
            $(this).removeAttr("style");
       }
       else if ($('input[type=checkbox]:checked').length >= 3) 

       {
            //$(this).find(".cb-element").prop('checked', false);
            alert("allowed only 3");
        }
      else
      {
        console.log("checked new");
        $(this).prop('checked', true);

       $(this).find('input[type=checkbox]').prop("checked",
    !$(this).find('input[type=checkbox]').prop("checked"));
       $(this).attr('style', 'border:3px solid black'); 
    }

});