I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.

I think I am close, but it doesn't seem to be working. Here is my code:

if($('#foreign_checkbox').attr('checked')) { 
    $('#additional_foreign').click(function() {
        alert('This click function works');
    });
} else {
    $('#additional_foreign').addClass('btn_disable');   
}

When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.

What am I doing wrong?

EDIT:Here is my HTML for clarification.

<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>

I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.

I think I am close, but it doesn't seem to be working. Here is my code:

if($('#foreign_checkbox').attr('checked')) { 
    $('#additional_foreign').click(function() {
        alert('This click function works');
    });
} else {
    $('#additional_foreign').addClass('btn_disable');   
}

When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.

What am I doing wrong?

EDIT:Here is my HTML for clarification.

<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>

• javascript
• jquery
• checkbox
• click

• 1 Your primary question aside, what your code does is to attach a click event handler to a button when the checkbox is checked, if not it is styled as 'disabled' but not actually disabled. Unchecking the checkbox again will not remove the button's onclick handler. – o.k.w Commented Feb 5, 2010 at 3:48
• o.k.w. - Oh, I see. How would I make a button unclickable in the else area of the conditional statement? – zeckdude Commented Feb 5, 2010 at 3:51
• See JQuery's unbind(). Not removing the action is probably OK, since adding the btn_disable class presumably disables the button. On the other hand, you will need to remove the class in your when-it's-checked case – user24359 Commented Feb 5, 2010 at 3:56

2 Answers 2

try using $('#foreign_checkbox').is(":checked") - rest of the code looks fine

If this was my code I'd do something like this to make it work:

<input id="foreign_checkbox" type="checkbox" />
<span style='display:none' id="additional_foreign">Click Me</span>

<script type="text/javascript">
    $(document).ready(function() {

        $("#foreign_checkbox").click(function() {
            if($('#foreign_checkbox').is(':checked')) { 
                $('#additional_foreign').show();
            } else {
                $('#additional_foreign').hide();
            }
        });

        $('#additional_foreign').click(function() {
            alert('This click function works');
        });
    });
</script>

The problem is that the code doesn't run continually, only when the page loads, when all the boxes are unchecked. You need an action that fires when the box is checked or unchecked, which adds an action or a class to the button:

$('#foreign_checkbox').change(function(){
    if (this.checked){
        $('#additional_foreign').click(function() {
           doSomething();
        });
    } else {
        $('#additional_foreign').addClass('btn_disable');
    }   
});