Enable and disable button through remove attribute

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.

Don't query the value of the checkbox, use `.prop('checked')` instead. — CBroe, Nov 30 '16 at 18:15
use this [fiddle](https://jsfiddle.net/pandeyvishal1986/kpu35kqm/#&togetherjs=JoMqs8FyNn) — RonyLoud, Nov 30 '16 at 18:19

Zakaria Acharki · Accepted Answer · 2016-11-30T18:23:21.423

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

You should use `prop()` instead of `attr()` to toggle based on a value. http://api.jquery.com/prop/ — Soviut, Nov 30 '16 at 18:17
_I want to write a program to enable and disable button on checkbox through remove attribute_, i'm trying just to answer the question. — Zakaria Acharki, Nov 30 '16 at 18:18
You're trying to answer the question however you should be directing the OP to use `.prop()` instead of `.attr()`. As jQuery states (emphasis mine): _To retrieve and change DOM properties such as the checked, selected, or **disabled** state of form elements, use the .prop() method._ — j08691, Nov 30 '16 at 18:29

score 1 · Answer 2 · answered Nov 30 '16 at 18:16

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

score 1 · Answer 3 · answered Nov 30 '16 at 18:16

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

score 0 · Answer 4 · answered Nov 30 '16 at 18:15

There are two issues with the code:

var x = $(this).attr('value'); will always return the value of the checkbox, whether it's checked or not. I fyou want to check its checked state, it's the checked property on the element (this.checked in your handler, or $(this).prop("checked") if you want more jQuery).
$('#myButton').attr('disabled'); is a no-op: It reads the value of the attribute, and then throws it away. To set it, you'd do $('#myButton').attr('disabled', 'disabled');

Note that using prop('disabled', trueOrFalse) is the preferred way to set/clear the disabled state.

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

But since you specifically said you wanted to use the attribute:

$(document).ready(function() {
   $('#myCheckBox').on('change', function() {
     if (this.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 />

But here's an example of using the property, which is really the way to go:

$(document).ready(function() {
   $('#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 />

score 0 · Answer 5 · answered Nov 30 '16 at 18:20

Use the is method of checkbox. Use this JS fiddle:

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

score 0 · Answer 6 · answered Nov 30 '16 at 18:29

0

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

answered Nov 30 '16 at 18:29

Rakesh Shriwas

371
4
14

Enable and disable button through remove attribute

6 Answers6