jquery - w3schools - चयनित चेकबॉक्स की संख्या को सीमित कैसे करें?




jquery tutorial (7)

मेरे पास निम्न HTML है:

        <div class="pricing-levels-3">
          <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
          <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
        </div>

लाइव साइट:

http://www.chineselearnonline.com/amember/signup20.php

मैं इसे कैसे कर सकता हूं ताकि उपयोगकर्ता केवल उन चेकबॉक्सों में से 3 का चयन कर सके?


कामकाजी DEMO

इसे इस्तेमाल करे

var theCheckboxes = $(".pricing-levels-3 input[type='checkbox']");
theCheckboxes.click(function()
{
    if (theCheckboxes.filter(":checked").length > 3)
        $(this).removeAttr("checked");
});

इस DEMO प्रयास करें:

 $(document).ready(function () {
   $("input[name='vehicle']").change(function () {
      var maxAllowed = 3;
      var cnt = $("input[name='vehicle']:checked").length;
      if (cnt > maxAllowed) 
      {
         $(this).prop("checked", "");
         alert('Select maximum ' + maxAllowed + ' Levels!');
     }
  });
});

इस तरह मैंने इसे काम किया:

// Function to check and disable checkbox
function limit_checked( element, size ) {
  var bol = $( element + ':checked').length >= size;
  $(element).not(':checked').attr('disabled',bol);
}

// List of checkbox groups to check
var check_elements = [
  { id: '.group1 input[type=checkbox]', size: 2 },
  { id: '.group2 input[type=checkbox]', size: 3 },
];

// Run function for each group in list
$(check_elements).each( function(index, element) {
  // Limit checked on window load
  $(window).load( function() {
    limit_checked( element.id, element.size );
  })

  // Limit checked on click
  $(element.id).click(function() {
    limit_checked( element.id, element.size );
  });
});


मैं कहूंगा कि लेटियागोल्व्स ने कहा, लेकिन आपके फॉर्म में एक से अधिक चेकबॉक्स प्रश्न हो सकते हैं, इसलिए मैं ऐसा करने की अनुशंसा करता हूं:

  var limit = 3;
    $('input.single-checkbox').on('change', function(evt) {
        if($('input.single-checkbox').siblings('input.single-checkbox:checked').length > limit) {
            this.checked = false;
        }
    });

मैंने इस फ़ंक्शन को ऑटो अनचेक करने के लिए बदल दिया है

      var limit = 3;
      $('.compare_items').on('click', function(evt) {
        index = $(this).parent('td').parent('tr').index();
        if ($('.compare_items:checked').length >= limit) {
          $('.compare_items').eq(localStorage.getItem('last-checked-item')).removeAttr('checked');
          //this.checked = false;
        }
        localStorage.setItem('last-checked-item', index);
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="compare_items">1
<input type="checkbox" class="compare_items">2
<input type="checkbox" class="compare_items">3
<input type="checkbox" class="compare_items">4
<input type="checkbox" class="compare_items">5
<input type="checkbox" class="compare_items">6
<input type="checkbox" class="compare_items">7
<input type="checkbox" class="compare_items">8
<input type="checkbox" class="compare_items">9
<input type="checkbox" class="compare_items">10


$("input:checkbox").click(function(){
    if ($("input:checkbox:checked").length > 3){
      return false;
   }
});




jquery