How to enable checkbox when checked?

Question

Here's my code:

HTML:

<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms &amp; <br>Conditions</a>&nbsp;and&nbsp;<a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled" />

JavaScript

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('submit');
checker.onchange = function(){
     if(this.checked){
          sendbtn.disabled = false;
     } else {
          sendbtn.disabled = true;
};

jQuery

$( "#checkme" ).on( "click", function() {
        if($( "#checkme:checked" ).length > 0) {
               $('#submit').prop('disabled', false);
        } else{
               $('#submit').prop('disabled', true);
        }  
});

All not working. Please help.

Also help me add in the javascript a class for css to make the button transparent when disabled. Thanks a lot!

two things: you need to make sure your script tag comes after the html elements you're dealing with (unless you use something like a $(document).ready()). Second, your JavaScript block is missing the close brace for the onchange handler function. With those two changes, it worked properly for me — David784
– David784, Commented Mar 9, 2018 at 23:57

Mohamed-Yousef · Accepted Answer · 2018-03-10 00:16:54Z

1

You need to use change not click and to add style to the disabled input you can simply use #submit[disabled]

$( "#checkme" ).on( "change", function() {
  $('#submit').prop('disabled', !this.checked);
}).change(); // use this to run change event on load

#submit{
  transition-duration : 0.5s;
}
#submit[disabled]{
  opacity : 0.5;
  transition-duration : 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms &amp; <br>Conditions</a>&nbsp;and&nbsp;<a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit"/>

To simplify your code you can use $('#submit').prop('disabled', !this.checked); this.checked will return true when checked and false when unchecked so you can use ! before it to reverse it

Note: be sure you include jquery

To add an effect to the input while disabled true/false you can add something like transition-duration : 0.5s;

edited Mar 10, 2018 at 0:16

answered Mar 10, 2018 at 0:05

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

1 Comment

Mohamed-Yousef Over a year ago

You're welcome @crosse .. I voted your question up to let you upvote Jonny's answer .. Have a great day :-)

Jonny · Accepted Answer · 2018-03-10 00:22:48Z

0

Javascript Solution

I just kept it simple with regular javascript. I added an onclick function to the checkbox that enables the submit when the checkbox is checked.
Hope it helps.

function checkA(){
if(document.getElementById('checkme').checked == true){   
document.getElementById('submit').disabled = "";
} else {
document.getElementById('submit').disabled = "disabled";}}

<input onclick="checkA();" type="checkbox" id="checkme">
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms &amp; <br>Conditions</a>&nbsp;and&nbsp;<a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled">

answered Mar 10, 2018 at 0:22

Jonny

1,3371 gold badge16 silver badges27 bronze badges

1 Comment

Jonny Over a year ago

No problem glad I could help.

Collectives™ on Stack Overflow

How to enable checkbox when checked?

2 Answers 2

1 Comment

Javascript Solution

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Javascript Solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related