Question

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

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

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

最好的办法可能是将复选框移出段落，或者您可以切换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', '');
});

FIDDLE

Answer 3

将更改事件绑定到您的复选框..并使用三元来缩短您的代码。我还假设您正在使用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' : '');
});

并从html中删除了p标记。将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 4

这很有效，我将其绑定到点击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', '');
    }
}

）;

check不会出现在复选框中

4 个答案: