Why my disable/enable checkbox is not working in JQuery?

Question

I do not understan why this code is not working. Please, try to be specific in your anwer because it must be something really silly.

$("#cagree").on("change", function(e){
    if($("#chbx").attr("checked")){
      $("#submitbtn").button("enable");
    } else {
      $("#submitbtn").button("disable");
    }
    
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html> 
<html> 
<head> 
 <title>My Page</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 
<body> 
<div data-role="page">

 <div data-role="content"> 
  <label><input type="checkbox" name="checkbox-0" id="chbx" class="cagree"> I agree </input></label>
      <input type="button" value="Submit" id="submitbtn" class="submit" disabled/>
 </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Possible duplicate of [Setting "checked" for a checkbox with jQuery?](https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Álvaro González, Dec 27 '17 at 16:50
What's `$("#submitbtn").button("enable")` supposed to do? There's also no such tag as `` — j08691, Dec 27 '17 at 16:54

Alive to die - Anant · Accepted Answer · 2017-12-27T17:01:59.110

1.$("#cagree") need to be $(".cagree")

2.Use .is(":checked") to check that checkbox is checked or not

3.Instead of $("#submitbtn").button("enable") do $("#submitbtn").prop('disabled', false); and vice-versa

Working snippet:-

$(".cagree").on("change", function(e){ // it's class so use .
  if($(this).is(":checked")){ // use $(this) for current-object
    $("#submitbtn").prop('disabled', false); // it's property so use .prop
  }else{
    $("#submitbtn").prop('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html> 
<html> 
  <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

  </head> 
  <body> 
    <div data-role="page">

      <div data-role="content"> 
        <label><input type="checkbox" name="checkbox-0" id="chbx" class="cagree"> I agree </label>
        <input type="button" value="Submit" id="submitbtn" class="submit" disabled/>
      </div><!-- /content -->

    </div><!-- /page -->

  </body>
</html>

Note:-

enable and disable are properties so use .prop() to set them.

</input> is invalid so remove that.

Why my disable/enable checkbox is not working in JQuery?

1 Answers1