CODEWITHSUNDEEP
jquerycheckbox
Professor B
Professor B

Reputation: 53

Disable button on unchecked box not working

I'm having trouble disabling the submit button when the checkbox is unchecked. It works for everything else except the checkbox. 

<fieldset>
    <input class="disableButton" id="card" type="text" />
    <select class="selected-state disableButton" id="month" >
        <option value="">Exp. Month</option>
        <option value="01">01 - Jan</option>
        ...
    </select>
    <select class="selected-state disableButton" id="year" />
        <option value="">Exp. Year</option>
        <option value="2014">2014</option>
        ...
    </select>
    <input class="disableButton" id="cvc" type="text" />
        <p>I agree to the <a href="http://nofusstoothbrush.com/terms-conditions/" target="_blank">Terms and Conditions</a> <input id="termsCheck" type="checkbox" checked></p>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input id="submitCard" class="action-button" type="submit" value="Submit" disabled="disabled" title="Please fill all required fields" />
</fieldset>    

$(document).ready(function(){
            $('.disableButton').on('keyup change', function(){
                if ($('#card').val().length < 10 || $('#cvc').val().length < 3 || $('#month').val() == '' || $('#year').val() == '' || $('#termsCheck').attr('checked') == false){
                        $('#submitCard').prop('disabled', true);
                } else {
                        $('#submitCard').prop('disabled', false);
                }
            });
    });

Upvotes: 0

Views: 90

Answers (2)

Alon Dahari
Alon Dahari

Reputation: 1147

<form>
  <input class="disableButton" id="card" type="text" />
  <select class="selected-state disableButton" id="month" >
    <option value="">Exp. Month</option>
    <option value="01">01 - Jan</option>
    ...
  </select>
  <select class="selected-state disableButton" id="year" />
    <option value="">Exp. Year</option>
    <option value="2014">2014</option>
    ...
  </select>
  <input class="disableButton" id="cvc" type="text" />
    <p>I agree to the <a href="http://nofusstoothbrush.com/terms-conditions/" target="_blank">Terms and Conditions</a> <input id="termsCheck" type="checkbox" checked></p>
  <input type="button" name="previous" class="previous action-button" value="Previous" />
  <input id="submitCard" class="action-button" type="submit" value="Submit" disabled="disabled" title="Please fill all required fields" />
</form>    


$(document).ready(function(){
  $('form').on('keyup change', function(){
    if ($('#card').val().length < 10 || $('#cvc').val().length < 3 || $('#month').val() == '' || $('#year').val() == '' || $('#termsCheck').prop('checked') == false){
      $('#submitCard').prop('disabled', 'disabled');
    } else {
      $('#submitCard').prop('disabled', '');
    }
  });
});

http://jsfiddle.net/622WM/1/

Upvotes: 0

Terry
Terry

Reputation: 66123

Use .is(':checked') or .prop('checked') to assess the checkbox status:

$(document).ready(function(){
    $('.disableButton').on('keyup change', function(){
        if ($('#card').val().length < 10 || $('#cvc').val().length < 3 || $('#month').val() == '' || $('#year').val() == '' || !$('#termsCheck').is(':checked')){
                $('#submitCard').prop('disabled', true);
        } else {
                $('#submitCard').prop('disabled', false);
        }
    });
});

See working example here: http://jsfiddle.net/teddyrised/m9KN4/

You also need to add the class disabledButton to the checkbox element, and as a rule of thumb, it should be the user who has to give consent explicitly, so it's better to leave it unchecked first:

<input id="termsCheck" type="checkbox" class="disableButton" />

p/s: I think you have accidentally made one of the <select> element a self-closing one...

Upvotes: 1

Related Questions