CODEWITHSUNDEEP
javascriptjqueryinputcheckboxstyling
Ricki
Ricki

Reputation: 943

jQuery checkbox styling issue

I have a piece of jQuery code, which I use to check if a checkbox is not checked. If not, it throws an event. Here it is:


$('#Button').click(function() {
        if(!$('input[@name=\"image_id\"]:checked').val()){
            //Do Something
            return false;
            }
});

It works great, but i decided to style the default checkbox with jQuery Checkbox plugin.

Now heres the problem, This is what the output is after styling:

<input type="radio" name="answer_id" value="37" style="position: absolute; z-index: -1; visibility: hidden;">`
<span class="jquery-safari-checkbox jquery-safari-checkbox-checked"><span class="mark"><img src="empty.png"></span></span>

thus leaving me with no way to see if the input is checked. Any ideas on what I can do (if anything) or shall i just revert to the old checkboxes?

Upvotes: 0

Views: 341

Answers (2)

Jeff B
Jeff B

Reputation: 30099

You don't have to do anything special. The original checkbox is still there and maintains its state. When you click the fancy checkbox, the plugin updates the hidden checkbox to match the current state.

You can update your code a little, too, if you use the latest jQuery. Your code is quite antiquated:

$('#Button').click(function () {
    if (!$('input[name=image_id]').prop('checked')) {
        //Do something
        return false;
    }
});

Demo: http://jsfiddle.net/k2d6E/

Upvotes: 1

Ryan George
Ryan George

Reputation: 186

Kinda messy in my opinion to do this this way, but:

if($(".jquery-safari-checkbox").hasClass("jquery-safari-checkbox-checked")){
   //Do something
   return false;
}

Upvotes: 1

Related Questions