如何使用单选按钮禁用和限制复选框（Javascript）

Question

我有一个无线电类型按钮和几个复选框。当我选择非独占时，我基本上要禁用复选框，如果我选择套餐1 ，则将复选框限制为 2 。

这是我的 html代码：

<label>
    <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive
    </label>
    <label>
    <input type="radio" value="package1" id="package1" name="packages"> Package 1
    </label>
    <label>
    <input type="radio" value="package2" id="package2" name="packages"> Package 2
    </label>
<br />
    <label><h2>Rice </h2></label>
    <br />
    <a style="color: darkred;">2 Choices</a>
    <br />
    <div class="checkboxfood">
      <label>
      <input type="checkbox" class="food" value=""> Plain Rice (Mandatory)
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Buttered Rice
      </label>
      <label>
      <input type="checkbox" class="food" value=""> Garlic Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Kimchi Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Adobo Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Yang Chow Rice
      </label>
    <br />
    <label>
      <input type="checkbox" class="food" value=""> Shanghai Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Bagoong Rice
      </label>
    </div>

我试过这个 javascript ：

$('#package1').on('change', function() {
$('.checkBoxes :checkbox').prop('disabled', true);
$(':checkbox:eq(0), :checkbox:eq(1), :checkbox:eq(2), :checkbox:eq(3), :checkbox:eq(4), :checkbox:eq(5)\n\
, :checkbox:eq(6), :checkbox:eq(7), :checkbox:eq(8), :checkbox:eq(9), :checkbox:eq(10), :checkbox:eq(11), :checkbox:eq(12)\n\
, :checkbox:eq(13), :checkbox:eq(14), :checkbox:eq(15)').prop('disabled', false);

});


$('#package2').on('change', function() {
$('.checkBoxes :checkbox').prop('disabled', true);
$(':checkbox:eq(0), :checkbox:eq(1)').prop('disabled', false);
});

$('#non-exclusive').on('change', function() {
$('.checkBoxes :checkbox').prop('disabled', true);
});

它启用了复选框，但不会限制它。此外，如果我回到非Exlusive ，则复选框不会再回到“禁用”状态。

我也试过这段代码：

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

这限制了我的复选框，但没有响应我的单选按钮。

Answer 1

如果你熟悉JQuery使用它 选择非独占

时禁用复选框

$('input[type=radio]').change(function(){
  if($(this).attr('id') == 'non-exclusive'){
    $("input[type=checkbox]").attr("disabled","disabled");
  } else {
    $("input[type=checkbox]").removeAttr("disabled");
  }
 });

要在选择package1

时将复选框限制为2

$('input[type=checkbox]').change(function(){
   //get the checked radio id
   var radio = $('input[type=radio]:checked').attr('id');

   if(radio == 'package1'){
      //check the number of the checked checkboxes
      if($('input[type=checkbox]:checked').length > 2){
         //do what you want here  ex: display alert message
         this.checked=false;
         return false;
      }//end if
    }//end if
});

当然，如果用户在选择package2之后选择了两个以上的复选框，则必须编写更多代码来取消选中所有框或实现逻辑

Answer 2

如果用户在程序包2中选择2个以上后更改了包1，那么以下将执行您要求的所有操作以及取消选中任何大于2的复选框

var $checkboxes = $('.checkboxfood :checkbox'),
  $radios = $('.radios input:radio')


$radios.on('change', function(e) {
  if (this.value === 'non-exclusive') {
    $checkboxes.prop('checked', false).prop('disabled', true)
  } else {
    $checkboxes.prop('disabled', false);
  }
  if (this.value == 'package1') {
    // leave only 2 checked 
    $checkboxes.filter(':checked:gt(1)').prop('checked', false)
  }
});

// only need to know if package 1 is checked when checkboxes are selected
$checkboxes.on('change', function(e){
  if($('#package1').is(':checked') && $checkboxes.filter(':checked').length >2){
    this.checked = false;
    console.log("Only 2 allowed for package 1")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radios">
  <label>
    <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive
  </label>
  <label>
    <input type="radio" value="package1" id="package1" name="packages"> Package 1
  </label>
  <label>
    <input type="radio" value="package2" id="package2" name="packages"> Package 2
  </label>
</div>


<br />
<label>
  <h2>Rice </h2></label>
<br />
<a style="color: darkred;">2 Choices</a>
<br />
<div class="checkboxfood">
  <label>
    <input type="checkbox" class="food" value=""> Plain Rice (Mandatory)
  </label>
  <label>
    <input type="checkbox" class="food" value=""> Buttered Rice
  </label>
  <label>
    <input type="checkbox" class="food" value=""> Garlic Rice
  </label>
  <label>
    <input type="checkbox" class="food" value=""> Kimchi Rice
  </label>
  <label>
    <input type="checkbox" class="food" value=""> Adobo Rice
  </label>
  <label>
    <input type="checkbox" class="food" value=""> Yang Chow Rice
  </label>
  <br />
  <label>
    <input type="checkbox" class="food" value=""> Shanghai Rice
  </label>
  <label>
    <input type="checkbox" class="food" value=""> Bagoong Rice
  </label>
</div>

Answer 3

使用原生JavaScript：

 let q = document.getElementsByClassName('food');
  q = Array.from(q);

  // handle chacked event
  let packages = document.querySelectorAll('input[name="packages"]')
  packages = Array.from(packages);

  let foods = Array.from(document.querySelectorAll('input[type="checkbox"]'))
  foods = Array.from(foods);

  for (let pack in packages) {
    if (packages.hasOwnProperty(pack)) {
      packages[pack].onclick = function () {
        let choosedPack = this.value;

        if (choosedPack === 'non-exclusive') {
          q.forEach(function (item) {
            item.disabled = true;
          });
        } else if (choosedPack === 'package1') {
        
          q.forEach(function (item) {
            item.disabled = false;
          });

          q.forEach(function (item) {
            item.checked = false;
          });
   
          for (let food in foods) {
            if (foods.hasOwnProperty(food)) {
              foods[food].onclick = function () {
                if ((document.querySelectorAll('input[type="checkbox"]:checked').length) > 2) {
                  alert('More than 2 values!');
                  this.disabled = false;
                  return false;
                }
              }
            }
          }
        }
        

      }
    }

  }

<label>
    <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive
</label>
<label>
    <input type="radio" value="package1" id="package1" name="packages"> Package 1
</label>
<label>
    <input type="radio" value="package2" id="package2" name="packages"> Package 2
</label>
<br />
<label><h2>Rice </h2></label>
<br />
<a style="color: darkred;">2 Choices</a>
<br />
<div class="checkboxfood">
    <label>
        <input type="checkbox" class="food" value=""> Plain Rice (Mandatory)
    </label>
    <label>
        <input type="checkbox" class="food" value=""> Buttered Rice
    </label>
    <label>
        <input type="checkbox" class="food" value=""> Garlic Rice
    </label>
    <label>
        <input type="checkbox" class="food" value=""> Kimchi Rice
    </label>
    <label>
        <input type="checkbox" class="food" value=""> Adobo Rice
    </label>
    <label>
        <input type="checkbox" class="food" value=""> Yang Chow Rice
    </label>
    <br />
    <label>
        <input type="checkbox" class="food" value=""> Shanghai Rice
    </label>
    <label>
        <input type="checkbox" class="food" value=""> Bagoong Rice
    </label>
</div>