CODEWITHSUNDEEP
javascriptjquery
Prady
Prady

Reputation: 11310

Need to enable/disable a button on click of checkbox

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

Upvotes: 2

Views: 3129

Answers (4)

S L
S L

Reputation: 14318

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

Upvotes: 1

Adam Ayres
Adam Ayres

Reputation: 8900

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/

Upvotes: 2

Anwar Chandra
Anwar Chandra

Reputation: 8638

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

Upvotes: 1

rahul
rahul

Reputation: 187030

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

Upvotes: 2

Related Questions