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? — Álvaro González
– Álvaro González, Commented Dec 27, 2017 at 16:50
What's $("#submitbtn").button("enable") supposed to do? There's also no such tag as </input> — j08691
– j08691, Commented Dec 27, 2017 at 16:54

Death-is-the-real-truth · Accepted Answer · 2017-12-27 17:01:59Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related