JQuery: отключить / включить несколько флажков, если установлен другой флажок

Question

Я пытаюсь включить и отключить несколько флажков, когда щелкают другие флажки.

Я хочу отключить box1, box2, box3, если проверены какие-либо из Cash или Square или Paypal.В противном случае я хочу, чтобы box1, box2, box3 были включены.

В настоящее время у меня есть этот код:

var check = $("#checkit1");

$("#checkit1").on('click',checkStatus);
function checkStatus(){
    
if(check.is(':checked'))
{
    $("#click1").prop('disabled', true);
    $("#click2").prop('disabled', true);
    $("#click3").prop('disabled', true);
}
else{
    $("#click1").prop('disabled', false);
    $("#click2").prop('disabled', false);
    $("#click3").prop('disabled', false);
}
    
}

<br>
<div>
    <input type="checkbox" id="checkit1" /> Cash <br>
    <input type="checkbox"  id="checkit2" /> Square <br>
    <input type="checkbox"  id="checkit3" /> Paypal <br>
    
    ------------------------------------------------<br>
    
    <input type="checkbox"  id="checkit4" /> BBT <br>
    <input type="checkbox"  id="checkit5" /> Citi <br>
    **<input type="checkbox"  id="click1" /> dep <br>
    **<input type="checkbox"  id="click2" /> trans <br>
    **<input type="checkbox"  id="click3" /> check <br>
    
</div>

Что я делаю не так?

Answer 1

Хотя код, который я показываю, далек от совершенства (слишком много рекурсии, будет трудно быстро расширить число опций и т. Д.), Он действительно достигает того, что вы просите, и должен помочь вам начать создавать лучший код.

var check = $("#checkit1");
var check2 = $("#checkit2");
var check3 = $("#checkit3");

$("#checkit1").on('click',checkStatus);
$("#checkit2").on('click',checkStatus);
$("#checkit3").on('click',checkStatus);
function checkStatus(){ 
if(check.is(':checked') || check2.is(':checked') || check3.is(':checked'))
{
    $("#click1").prop('disabled', true);
    $("#click2").prop('disabled', true);
    $("#click3").prop('disabled', true);
}
else{
    $("#click1").prop('disabled', false);
    $("#click2").prop('disabled', false);
    $("#click3").prop('disabled', false);
}

}

Ключевым моментом, который следует извлечь из этого кода, является использование оператора or (||).Это позволяет вам соединять чеки вместе, например, я связал три чека вместе, чтобы сказать: «если чек или проверка 2 или проверка 3 проверены, тогда выполните цикл».

Эта является отличной ссылкой, чтобы помочь понять операторов (основы в любом случае).

Answer 2

//add a change event listener to all the options by class
var $disableCity = $('.disableCiti').on('change', function (e) {
  //set all the checkboxes to disabled if any of the top checkboxes
  //are checked, regardless of if the one we just changed is unchecked
  //or not
	$('.citiInput').prop('disabled', $disableCity.filter(':checked').length);
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--

Added classes to the relevant checkboxes so we could target them all.

-->
<div>
  <div><input type="checkbox" id="checkit1" class="disableCiti"> Cash</div>
  <div><input type="checkbox" id="checkit2" class="disableCiti"> Square</div>
  <div><input type="checkbox" id="checkit3" class="disableCiti"> Paypal</div>
  <div>------------------------------------------------</div>
  <div><input type="checkbox" id="checkit4"> BBT</div>
  <div><input type="checkbox" id="checkit5"> Citi</div>
  <div>** <input type="checkbox" id="click1" class="citiInput"> dep</div>
  <div>** <input type="checkbox" id="click2" class="citiInput"> trans</div>
  <div>** <input type="checkbox" id="click3" class="citiInput"> check</div>
</div>

Answer 3

Есть несколько способов достичь этого - один из способов (, который сохраняет общую структуру вашего кода ) - установить все флажки, которые вы хотите отключить, основываясь на этом:

var checkboxes = $("#checkit1, #checkit2, #checkit3");

И затем используйте эти выбранные флажки в обработчике click, чтобы определить, есть ли какие-либо из них :checked, например:

$(checkboxes).is(':checked') // Returns true is at least one checkbox in selected checkboxes checked

Эти две строки могут затем использоваться в вашем сценарии для достижениячто нужно следующим образом:

// Select checkboxes used to control/toggle disable of target checkboxes
var checkboxes = $("#checkit1, #checkit2, #checkit3");

checkboxes.on('click',checkStatus);

function checkStatus() {

  // if at least one checkbox in selected checkboxes is checked then 
  // disable target checkboxes
  if($(checkboxes).is(':checked'))
  {
      $("#click1").prop('disabled', true);
      $("#click2").prop('disabled', true);
      $("#click3").prop('disabled', true);
  }
  else{
      $("#click1").prop('disabled', false);
      $("#click2").prop('disabled', false);
      $("#click3").prop('disabled', false);
  }        
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<br>
<div>
    <input type="checkbox" id="checkit1" /> Cash <br>
    <input type="checkbox"  id="checkit2" /> Square <br>
    <input type="checkbox"  id="checkit3" /> Paypal <br>
    
    ------------------------------------------------<br>
     
    **<input type="checkbox"  id="click1" /> box1 <br>
    **<input type="checkbox"  id="click2" /> box2 <br>
    **<input type="checkbox"  id="click3" /> box3 <br>
    
</div>