2017-03-13 18 views
0

Ich habe 2 Kontrollkästchen wie unten. Der zweite sollte nur anklickbar sein, wenn der erste überprüft wurde. Das habe ich geschafft.jquery checkbox Deaktivieren/Deaktivieren

Wenn jedoch die erste Option deaktiviert ist, sollte die zweite deaktiviert und deaktiviert werden.

$(document).ready(function() { 
 
    var ckbox = $('#optin'); 
 

 
    $('input').on('click', function() { 
 
    if (ckbox.is(':checked')) { 
 
     $('#tc').removeAttr('disabled'); //enable input 
 

 
    } else { 
 
     $('#tc').prop('checked', false); //remove check 
 
     $('#tc').removeAttr('checked'); //disable input 
 

 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="optin" id="optin" class="required"> 
 
<label for="optin"> Checkbox1 </label> 
 

 
<input type="checkbox" name="tc" id="tc" class="" disabled="disabled"> 
 
<label for="tc"> Checkbox2 </label>

Antwort

0

In der else Sie versuchen, das Attribut checked zu entfernen. Setzen Sie stattdessen die Eigenschaft disabled auf true.

$(document).ready(function() { 
 
    var ckbox = $('#optin'); 
 

 
    $('input').on('click', function() { 
 
    if (ckbox.is(':checked')) { 
 
     $('#tc').removeAttr('disabled'); //enable input 
 

 
    } else { 
 
     $('#tc').prop('checked', false); //remove check 
 
     $('#tc').prop('disabled', true); //disable input 
 

 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="optin" id="optin" class="required"> 
 
<label for="optin"> Checkbox1 </label> 
 

 
<input type="checkbox" name="tc" id="tc" class="" disabled="disabled"> 
 
<label for="tc"> Checkbox2 </label>

1

ich es so tun würde:

$(document).ready(function() { 
 
    $('input').on('click', function() { 
 
    $('#tc').prop({ 
 
     'checked': $('#optin').is(':checked'), 
 
     'disabled': !$('#optin').is(':checked') 
 
    }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="optin" id="optin" class="required"> 
 
<label for="optin"> Checkbox1 </label> 
 

 
<input type="checkbox" name="tc" id="tc" class="" disabled="disabled"> 
 
<label for="tc"> Checkbox2 </label>

+0

Es sollte möglich sein, nur checkbox1 überprüfen – komu4

+0

Ich verstehe nicht, was du meinst damit. Meinst du wie https://jsfiddle.net/q01p2gf1/? – j08691