R K R K - 10 days ago 5
Javascript Question

Enable and disable button through remove attribute

I want to write a program to enable and disable button on checkbox through remove attribute jQuery code.

I tried it but it didn't work.



$(document).ready(function() {
$('#myCheckBox').on('change', function() {
var x = $(this).attr('value');
if (x == 'on') {
$('#myButton').removeAttr('disabled');
} else if (x == undefined) {
$('#myButton').attr('disabled');
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />





I am a beginner in jQuery, please comment below for any query.

Answer

Use .is(':checked') instead of checing the value. also replace :

$('#myButton').attr('disabled'); //Get the value

By :

$('#myButton').attr('disabled','disabled'); //Set the value

To set the value.

NOTE : you could do this using prop() instead :

$("#myButton").prop('disabled', !$(this).is(':checked'));

Hope this helps.

attr()/removeAttr() Snippet :

$(document).ready(function(){
  $('#myCheckBox').on('change',function(){
    if( $(this).is(':checked') ){
      $('#myButton').removeAttr('disabled');
    }else{
      $('#myButton').attr('disabled','disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />

prop() Snippet :

$(document).ready(function(){
  $('#myCheckBox').on('change',function(){
    $("#myButton").prop('disabled', !$(this).is(':checked'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
  I agree with terms and conditions
  <input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />