开发者

Need to enable/disable a button on click of checkbox

开发者 https://www.devze.com 2023-02-15 21:49 出处:网络
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 o

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', 'disab开发者_如何学运维led');
}
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


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/


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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号