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

不要绑定到 p 上的切换。绑定到复选框上的更改：

我将 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', '');
    }
});​

小提琴：http: //jsfiddle.net/p4m8c/12/

Answer 2

将更改事件绑定到您的复选框......并使用三元来缩短您的代码。我还假设您使用的是 jQuery 1.7，因为这就是您设置 jsfiddle 的方式。您应该使用prop而不是attr设置您的disabled财产

$('#no-contingent').change(function() {
    var $checked = this.checked; // <-- store boolean - if checkbox is checked -  to use for ternary and set disabled property
    // added select in here since select gets same treatment for disabled and background color
    $('#contingent input,#contingent select').prop('disabled', $checked).css('backgroundColor', $checked ? '#FCFCFC' : '');
    $('#contingent select').css('color', $checked ? '#BEBEBE' : '');
    $('#contingent label').css('color', $checked ? '#AEAEAE' : '');
    $('#contingent .or-select').css('color', $checked ? '#B2B2B2' : '');
    $('#contingent h2').css('color', $checked ? '#CACACA' : '');
});

并p从 html 中删除标签。添加id到输入

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

http://jsfiddle.net/wirey00/p4m8c/19/

Answer 3

这有效，我将它绑定到单击http://jsfiddle.net/p4m8c/17/上的复选框

$('#contingent-check input[type=checkbox]').click(
function(){
    if ($(this).is(":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', '');
    }
}

);​</p>

Answer 4

您已将复选框放在段落中，并且单击事件发生在段落上，而不是复选框上。

最好的办法可能是将复选框移出段落，或者您可以在toggle()函数中切换复选框：

$('#contingent-check').toggle(
    function() {
        var checkbox = $('[name="no-contingent"]')[0];
        checkbox.checked = !checkbox.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');
    }, function() {
        var checkbox = $('[name="no-contingent"]')[0];
        checkbox.checked = !checkbox.checked;
        $('#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', '');
});​

小提琴