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

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

• javascript
• jquery

4 Answers 4

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

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"))

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

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