CODEWITHSUNDEEP
jqueryasp.netcheckboxjquery-validate
22332112
22332112

Reputation: 2397

Check if checkbox is not checked with jQuery?

How can I check if checkbox is not checked with jQuery? Is there something that is negative of .click(....)?

Here is my code:

$().ready(function () {
        // validate UserSettings form on keyup and submit
        $('#CheckBox').click(function () {
            $("#TextBox").validate({
                rules: {
                    NextLocation: {
                        required: true
                    }
                }
            });
        });
    });

This code works in reverse than what I want (if sets true when checkbox is checked). I want required to not be set to true if checkbox is checked

Upvotes: 1

Views: 3533

Answers (5)

Sparky
Sparky

Reputation: 98738

Your code...

$().ready(function () {
    // validate UserSettings form on keyup and submit
    $('#CheckBox').click(function () {
        $("#TextBox").validate({
            rules: {
                NextLocation: {
                    required: true
                }
            }
        });
    });
});

... has the following issues...

1) $().ready() is not recommended as per jQuery docs. Use $(document).ready() instead.

2) You cannot attach .validate() to an input element. It only gets attached to the <form> element.

3) The .validate() method is only used for initializing the plugin, not for testing anything. Therefore, it typically does not belong inside of a click handler. You would fire .validate() only once as soon as the form is constructed, typically within the DOM ready handler.

4) If you want to make something required depending on the state of something else, you would use the depends method within the required rule.

My working demo below shows that the text field named NextLocation is only required when the checkbox named check is not checked:

$(document).ready(function () {  // DOM ready handler

    $('#myform').validate({  // attach to form to initialize plugin with options
        rules: {
            NextLocation: {
                required: {
                    depends: function () {
                        return !$('input[name="check"]').is(':checked');
                    }
                }
            }
        }
    });

});

HTML:

<form id="myform">
    Checkbox: <input type="checkbox" name="check" />
    NextLocation: <input type="text" name="NextLocation" />
</form>

DEMO: http://jsfiddle.net/dymmw/

Upvotes: 1

Augusto
Augusto

Reputation: 819

You have two approaches:

A - You can change it using the click function an checking there:

...
('#CheckBox').click(function () {
   if($(this).is(':checked')){
       ...
   }
});
...

B - Use the change function, which I'd prefer

$("#CheckBox").change(function(){
   if($(this).checked){
      ...
   }

});

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

You can use ! to make sure that this gets executed when the current condition is false. So, when you write a situtaion where the code get executed when the checkbox is checked, just add ! in the start of the code as I did. And you'll get the code working. Other functions will be just the way they are .click() and so on. 

$('input[type=checkbox]').click(function () { // use #CheckBox if you want to
   if(!$(this).prop('checked')) { // if NO checkbox checked
     $('div').html("checked");
   }
})

This will look if the checkbox isn't checked!

Upvotes: 1

Swifty
Swifty

Reputation: 1432

Try this inside your if statement

 $('#checkbox').is('checked')

Upvotes: 0

RouteMapper
RouteMapper

Reputation: 2560

Try this

if($("#CheckBox").prop('checked')){
    //do something
}

Upvotes: 0

Related Questions