Enable and disable button through remove attribute [duplicate]

Question

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 1

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 />

Answer 2

You're over thinking this a bit. First use .prop() not .attr(). Second, just set the disabled property to the opposite of the checkbox's state with:

  $('#myCheckBox').on('change', function() {
    $('#myButton').prop('disabled', !$(this).is(':checked'));
  })

$(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 />

Answer 3

You don't need to use attr('value') use this.checked instead to get checkbox status. Then use prop() method to set button status like following.

$('#myCheckBox').on('change', function() {
    $('#myButton').prop('disabled', !this.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 />