Question

取消选中此复选框时，我无法禁用提交按钮。它适用于除复选框之外的所有其他内容。

<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);
                }
            });
    });

Answer 1

使用.is(':checked')或.prop('checked')评估复选框状态：

$(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);
        }
    });
});

请参阅此处的工作示例：http://jsfiddle.net/teddyrised/m9KN4/

您还需要将类disabledButton添加到复选框元素，并且根据经验，应该是必须明确表示同意的用户，因此更好首先取消选中：

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

p / s：我认为你不小心让其中一个<select>元素成了一个自我关闭的元素......

Answer 2

<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/

禁用未选中框上的按钮不起作用

2 个答案: