Need to enable/disable a button on click of checkbox

Question

I am trying to disable a order button when the page loads and enable it when one checks the Terms and condition checkbox. I have it working where the order button is disabled when the page loads but on the click of checkbox the button doesnt get enabled. Here is my code. Can anyone help me identify the problem

   <input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the <a href="#">Terms and Conditions</a>

Jquery Code

 var j$ = jQuery.noConflict();
 j$(document).ready(function(){
 alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
  j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
  j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
  if(j$('input[name="checkbox1"]').is(":checked")
     {
     j$('input[name="Order"]').attr('disabled', 'disabled');
     }
  else
     {
     j$('input[name="Order"]').removeAttr('disabled');
     }
  }
 });

Thanks

Prady

Adam Ayres · Accepted Answer · 2011-03-09 09:50:05Z

2

The code you provided had some missing ( and {, here is an updated version with some changes to handle the checkbox state properly:

var j$ = jQuery.noConflict();
j$(document).ready(function() {   
    var checkbox1 = j$('#checkbox1');
    var order = j$('input[name="Order"]');

    var verifyChecked = function() {
        if (checkbox1.is(":checked") === false) {
            order.attr('disabled', 'disabled');
        } else {
            order.removeAttr('disabled');
        }
    };

    verifyChecked();

    checkbox1.change(verifyChecked);
});

Here is a jsfiddle with it working:

http://jsfiddle.net/7uRf6/4/

edited Mar 9, 2011 at 9:50

answered Mar 9, 2011 at 9:42

Adam Ayres

8,9381 gold badge35 silver badges25 bronze badges

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

Comments

rahul · Accepted Answer · 2011-03-09 09:33:10Z

2

You have missed a closing parenthesis

if(j$('input[name="checkbox1"]').is(":checked")

should be

if(j$('input[name="checkbox1"]').is(":checked"))

Also you can use an id selector instead of this attribue selector.

And if you want to enable the button when the checkbox is checked you have to

if(!j$('input[name="checkbox1"]').is(":checked"))

answered Mar 9, 2011 at 9:33

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Anwar Chandra · Accepted Answer · 2011-03-09 09:33:19Z

1

in your change event,

if(j$('input[name="checkbox1"]').is(":checked")

it should be

if(j$('input[name="checkbox1"]').not(":checked")

I suggest you to create a function to check it.

var j$ = jQuery.noConflict();

j$(document).ready(function(){
   ToggleButton();
   j$('#checkbox1').change(ToggleButton);
});

function ToggleButton()
{
  if(j$('input[name="checkbox1"]').not(":checked"))
  {
    j$('input[name="Order"]').attr('disabled', 'disabled');
  }
  else
  {
    j$('input[name="Order"]').removeAttr('disabled');
  }
}

answered Mar 9, 2011 at 9:33

Anwar Chandra

8,6699 gold badges47 silver badges61 bronze badges

Comments

matt burns · Accepted Answer · 2011-04-17 06:15:52Z

1

<script src="jquery.js"></script>
<script>

$(document).ready(function (){

    $('#ch').click(

        function (){
            if($(this).is(':checked')){
                $('#bt').attr('disabled','disabled');
            }
            else {
                // remove
                $('#bt').removeAttr('disabled');                
            }
        }
    )

})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>

edited Apr 17, 2011 at 6:15

matt burns

25.6k13 gold badges112 silver badges110 bronze badges

answered Mar 9, 2011 at 9:35

S L

14.3k18 gold badges81 silver badges119 bronze badges

Collectives™ on Stack Overflow

Need to enable/disable a button on click of checkbox

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related