jquery для отключения нескольких флажков при выборе другого флажка

Question

У меня есть HTML-код, в котором у меня есть 7 блоков в div. Ниже приведен HTML-код.

<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="true">
          <div class="panel-body">
            <div class="col-md-6 col-sm-6 col-xs-12 ">            
              <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
											<label>Certification</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
              <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
											<label>Functional</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeLCM" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
											<label>LCM</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypePerformance" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px"  />
											<label>Performance</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeResilience" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
											<label>Resilience</label>
            </div>            
             <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px"  />
											<label>Security</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
											<label>System verification</label>
            </div> 

1) Теперь, если я установлю флажок «Сертификация», все остальные должны быть автоматически отключены.

2) Если проверка системы отмечена (все остальные автоматически включены и выделены серым цветом) (сертификация - нет и недоступны)

3) если индивидуально выбраны другие параметры, тогда (Сертификация и Проверка системы на Нет и выделены серым цветом)

пожалуйста, дайте мне знать, как я могу получить функциональность

Ниже приведен код, который я попробовал.

$('input[name="validationTypesDone"]').on('change', function() {
	    	   var val = $(this).attr('value');
	    	   switch(val) {
	    	   case 'Certification':
	    	     if($(this).is(':checked')){
	    	     $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', true);
			     $(this).prop('disabled', false)
			     } else {
			       $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', false);
			     }	    	      
	    	     break;
	    	   case 'System verification':
	    	     if($(this).is(':checked')){
	    	    	$('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', true);
				    $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('checked', true);
				    $('input[id="validationTypeCertification"]').prop('checked', false);				    
				    $(this).prop('disabled', false)
				     } else {
				        $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', false);
				     }
	    	       break;
	    	  
		     } 
	       });

Выше работает для варианта 1 и 2. Для третьего варианта вы можете дать мне лучшее решение.

Answer 1

Эта демонстрация реализует только одну из функций, где проверка Certification отключила все остальные.Надеюсь, вы сможете реализовать два других

. Здесь селектор jquery проверяет, проверен ли вход с именем validationTypesDone, а если id равен validationTypeCertification, тогда получите все остальные входные данные с другим именем и отключите их.их использование prop функция

$('input[name="validationTypesDone"]').on('change', function() {
  if ($(this).prop('checked') && $(this)[0].id === 'validationTypeCertification') {
    $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', true);
    $(this).prop('disabled', false)
  } else {
    $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', false);
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="true">
  <div class="panel-body">
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
      <label>Certification</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
      <label>Functional</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeLCM" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>LCM</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypePerformance" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>Performance</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeResilience" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>Resilience</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>Security</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>System verification</label>
    </div>