HTML-Formular: Deaktivieren Sie die restlichen Kontrollkästchen im HTML-Formular

Question

Das js-Skript deaktiviert korrekt die beiden verbleibenden Kontrollkästchen, wenn ich das große Kontrollkästchen auswählt und wieder aktiviert, wenn nicht aktiviert. Mit dieser Logik müsste ich jedoch für jeden spezifischen Fall kodieren.

Anstatt jede geprüfte Box mit spezifischen IDs und Codierungssperrlogik für jeden Fall manuell zu kennzeichnen, gibt es eine Möglichkeit, die aktivierten Kontrollkästchen, die nicht überprüft wurden, programmatisch zu deaktivieren?

html

<div class="checkbox" id="sizes"> 
    <label><input id="a" type="checkbox" name="large" value="1">Large</label> 
    <label><input id="b" type="checkbox" name="medium"value="1">Medium</label> 
    <label><input id="c" type="checkbox" name="small"value="1">Small</label> 
    </div> 

js

$(document).ready(function(){ 
$('input[id=a]').change(function(){ 
    if($(this).is(':checked')){ 
     $('input[id=a]').attr('disabled',false); 
     $('input[id=b]').attr('disabled',true); 
     $('input[id=c]').attr('disabled',true); 
    }else{ 
     $('input[id=a]').attr('disabled',false); 
     $('input[id=b]').attr('disabled',false); 
     $('input[id=c]').attr('disabled',false); 
     } 
    }); 
}) 

Answer 1

Sie alle deaktivieren die Kontrollkästchen innerhalb des div sizes außer der aktuellen wie folgt:

HTML:

<div class="checkbox" id="sizes"> 
    <label><input id="a" type="checkbox" name="large" value="1">Large</label> 
    <label><input id="b" type="checkbox" name="medium"value="1">Medium</label> 
    <label><input id="c" type="checkbox" name="small"value="1">Small</label> 
</div> 

JQUERY:

$(document).ready(function(){ 
    $('#sizes input[type=checkbox]').change(function(){ 
    if($(this).is(':checked')){ 
     $("#sizes").find(':checkbox').not($(this)).attr('disabled',true); 
     } 
     else{ 
     $("#sizes").find(':checkbox').attr('disabled',false); 
    } 
    }); 
}); 

jsfiddle Demo

Answer 2

ich denke, das

nützlich sein kann

$(document).ready(function(){ 
 
    
 
    $('.checkbox input[type=checkbox]').change(function(){  
 
     
 
     $('input[id=a]').attr('disabled',true); 
 
     $('input[id=b]').attr('disabled',true); 
 
     $('input[id=c]').attr('disabled',true); 
 
     
 
     if($(this).is(':checked')){ 
 
      $('input[id='+this.id+']').attr('disabled',false); 
 
     } 
 
     else 
 
     { 
 
      $('input[id=a]').attr('disabled',false); 
 
      $('input[id=b]').attr('disabled',false); 
 
      $('input[id=c]').attr('disabled',false); 
 
     } 
 
    }); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkbox" id="sizes"> 
 
    <label><input id="a" type="checkbox" name="large" value="1">Large</label> 
 
    <label><input id="b" type="checkbox" name="medium"value="1">Medium</label> 
 
    <label><input id="c" type="checkbox" name="small"value="1">Small</label> 
 
</div>

Answer 3

HTML

<div class="checkbox" id="sizes"> 
    <label><input id="a" class="checkbox1" type="checkbox" name="large" value="1">Large</label> 
    <label><input id="b" class="checkbox1" type="checkbox" name="medium"value="1">Medium</label> 
    <label><input id="c" class="checkbox1" type="checkbox" name="small"value="1">Small</label> 
</div> 

jQuery

$(document).ready(function(){ 
    $('.checkbox1').change(function(){ 
     if($(this).is(":checked")){ 
      $('.checkbox1').attr('disabled','disabled'); 
      $(this).removeAttr('disabled'); 
     }else{ 
      $('.checkbox1').removeAttr('disabled');; 
     } 
    }); 
})