CODEWITHSUNDEEP
jqueryruby-on-rails-3
Slick23
Slick23

Reputation: 5897

Using jQuery to test if a check box is checked or not

My form elements are generated by Rails.

<input id="agree_to_rules" name="agree_to_rules" type="checkbox" value="1">

I'm trying this to set the state of the submit button on the form, based on whether the checkbox is checked or not. (I know inline css is not greate, I'm just trying to get a visual cue while I test.

<script>
$(function() {

  if ($('#agree_to_rules').is(':checked')) {
          $('#tweet_your_entry').attr('disabled', 'false').css({color: '#666666'});
              } else {
          $('#tweet_your_entry').attr('disabled', 'true').css({color: '#f5f5f5'});
        }
});
</script>

It just seems to always evaluate to false, no matter the state of the checkbox. Anyone spot the error? Or can point me to a cleaner way to achieve the same result -- I'm very new to JS and jQuery.

UPDATE

Here's what I'm using now, based on the answer below:

<script>
$(function() {
  $('#agree_to_rules').change(function() {
  if ( $('#agree_to_rules').prop("checked") ) {
          $('#tweet_your_entry').attr('disabled', 'false').removeClass('ui-button-disabled ui-state-disabled');
              } else {
          $('#tweet_your_entry').attr('disabled', 'true').addClass('ui-button-disabled ui-state-disabled');
        }
    });
});
</script>

The trouble is, when the button is active, after someone's checked the box, the jquery-ui hover state for the button doesn't kick in any more. Anyone know why?

Upvotes: 0

Views: 2983

Answers (4)

user113716
user113716

Reputation: 322492

You need to place your code in a handler like .change(), and pass boolean true/false instead of strings.

$(function() {
    $('#agree_to_rules').change(function() {
        if (this.checked) {
            $('#tweet_your_entry').attr('disabled', false).css({
                color: '#666666'
            });
        } else {
            $('#tweet_your_entry').attr('disabled', true).css({
                color: '#f5f5f5'
            });
        }
    });
});

Working example: http://jsfiddle.net/CPFns/

Now the code will run each time the checkbox changes.

If you only wanted it to run when the page loads, then get rid of the change handler, but again be sure to pass true and false instead of "true" and "false".

Here's a more concise way to write it.

$(function() {
    $('#agree_to_rules').change(function() {
        $('#tweet_your_entry').attr('disabled', this.checked)
            .css({ color: this.checked ? '#666666' : '#f5f5f5' });
    });
});

Working example: http://jsfiddle.net/CPFns/1/

EDIT:

Based on the fiddle provided, I think this is a little cleaner solution:

$(function() {
    $("button, input:submit, a", ".actions").button();
    $('#agree_to_rules').change(function() {
        $('#tweet_your_entry')
            .attr('disabled', !this.checked)
            .toggleClass('ui-button-disabled ui-state-disabled', !this.checked);

    }).change();
});

Example: http://jsfiddle.net/psBQ7/2/

It seems that there's some issue with jQueryUI, where its hover functionality will never be enabled if the button was disabled when the page loads.

I removed the disabled="disabled" from the HTML, and simply triggered the .change() on page load, which will see that the box isn't checked, therefore disabling the button after jQueryUI has been applied.

Upvotes: 2

Sinetheta
Sinetheta

Reputation: 9429

The answers above are correct. But you can't change the "color" of the checkbox, the tick mark isn't text.

$('#agree_to_rules').change(function(){
    if( $('#agree_to_rules')[0].checked ) alert("check");
});

Upvotes: 0

CenterOrbit
CenterOrbit

Reputation: 6861

Try:

 if ($('#agree_to_rules').checked) { ...

Upvotes: 0

rkaregaran
rkaregaran

Reputation: 620

The value of your checkbox doesn't mean it's checked.

The html attribute is:

checked="checked"

Not 

value="1"

See this example:

<input type="checkbox" />
<input type="checkbox" checked="checked" />

The value is what would get posted in a form.

Upvotes: 0

Related Questions