jquery - 检查未出现在复选框中

Question

当用户单击相应的复选框时，我尝试使用 jQuery 显示和隐藏 div。这工作正常，但无论出于何种原因，支票永远不会出现在框中。有什么建议吗？

jfiddle - http://jsfiddle.net/p4m8c/

HTML

<p id="contingent-check"><label for="no-contingent"><input type="checkbox" name="no-contingent" value="yes" id="" />&nbsp;&nbsp;&nbsp;Do not want to add Contingent Beneficiary</label></p>

      <div id="contingent"><h2>Contingent Beneficiary</h2>
      <label for="contingent-name" class="label">Beneficiary Name:</label><br />
        <input name="contingent-name" type="textfield" id="name" class="name-field">
        <p class="or-select">Or select from the list below</p>
        <label for="contingent-potential" class="label">Potential Beneficiary:</label><br />
        <select name="contingent-potential" class="drop-down">
          <option value="estate">Estate</option>
        </select>
        <p></p>
        <label for="contingent-relationship" class="label">Relationship:</label><br />
        <select name="contingent-relationship" class="drop-down">
          <option value="estate">Estate</option>
        </select>
        <p></p>
      </div>

Javascript

$('#contingent-check').toggle(
    function(){
    $('#contingent input').attr('disabled' , true)
                          .css('backgroundColor', '#FCFCFC');
    $('#contingent select').attr('disabled' , true)
                          .css('color', '#BEBEBE')
                          .css('backgroundColor', '#FCFCFC');
    $('#contingent label').css('color', '#AEAEAE');
    $('#contingent .or-select').css('color', '#B2B2B2');
    $('#contingent h2').css('color', '#CACACA');
    },
    function(){
        $('#contingent input').attr('disabled' , false)
                          .css('backgroundColor', '');
    $('#contingent select').attr('disabled' , false)
                          .css('color', '')
                          .css('backgroundColor', '');
    $('#contingent label').css('color', '');
    $('#contingent .or-select').css('color', '');
    $('#contingent h2').css('color', '');
    });

Answer 1

不要绑定(bind)到 p 上的切换开关。绑定(bind)到复选框上的更改:

我将 HTML 更改为:

<p id="contingent-check"><input type="checkbox" name="no-contingent" value="yes" id="no-contingent" /><label for="no-contingent">&nbsp;&nbsp;&nbsp;Do not want to add Contingent Beneficiary</label></p>

然后脚本为:

$('#no-contingent').change(
function() {
    if ($(this).attr("checked") == "checked") {
        $('#contingent input').attr('disabled', true).css('backgroundColor', '#FCFCFC');
        $('#contingent select').attr('disabled', true).css('color', '#BEBEBE').css('backgroundColor', '#FCFCFC');
        $('#contingent label').css('color', '#AEAEAE');
        $('#contingent .or-select').css('color', '#B2B2B2');
        $('#contingent h2').css('color', '#CACACA');
    }
    else {
        $('#contingent input').attr('disabled', false).css('backgroundColor', '');
        $('#contingent select').attr('disabled', false).css('color', '').css('backgroundColor', '');
        $('#contingent label').css('color', '');
        $('#contingent .or-select').css('color', '');
        $('#contingent h2').css('color', '');
    }
});​

fiddle :http://jsfiddle.net/p4m8c/12/