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.

Don't query the value of the checkbox, use .prop('checked') instead. — C3roe
– C3roe, Commented Nov 30, 2016 at 18:15

Zakaria Acharki · Accepted Answer · 2016-11-30 18:23:21Z

4

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

edited Nov 30, 2016 at 18:23

answered Nov 30, 2016 at 18:15

Zakaria Acharki

67.5k15 gold badges78 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Soviut Over a year ago

You should use prop() instead of attr() to toggle based on a value. api.jquery.com/prop

Zakaria Acharki Over a year ago

I want to write a program to enable and disable button on checkbox through remove attribute, i'm trying just to answer the question.

j08691 Over a year ago

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.

Soviut Over a year ago

@j08691 no, it was directed at the person answering.

j08691 · Accepted Answer · 2016-11-30 18:16:43Z

1

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

answered Nov 30, 2016 at 18:16

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Ibrahim Khan · Accepted Answer · 2016-11-30 18:16:45Z

1

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

answered Nov 30, 2016 at 18:16

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Comments

T.J. Crowder · Accepted Answer · 2016-11-30 18:15:53Z

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

RonyLoud · Accepted Answer · 2016-11-30 18:20:08Z

0

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');
     }
   });
 });

answered Nov 30, 2016 at 18:20

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

Comments

Rakesh Shriwas · Accepted Answer · 2016-11-30 18:29:07Z

0

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

answered Nov 30, 2016 at 18:29

Rakesh Shriwas

6792 gold badges7 silver badges15 bronze badges

Collectives™ on Stack Overflow

Enable and disable button through remove attribute [duplicate]

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related