1

ユーザーが適切なチェックボックスをクリックしたときに、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', '');
    });
4

4 に答える 4

3

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/

于 2012-08-20T19:17:28.190 に答える
0

チェックボックスを段落内に配置しましたが、クリックイベントは、チェックボックスではなく段落で発生しています。

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

フィドル

于 2012-08-20T19:18:05.817 に答える
0

変更イベントをチェックボックスにバインドします。3進数を使用してコードを短縮します。また、jsfiddleを設定した方法であるため、jQuery1.7を使用していると仮定します。プロパティを設定するprop代わりにを使用する必要がありますattrdisabled

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

phtmlからタグを削除しました。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/

于 2012-08-20T19:23:12.470 に答える
0

これは機能します。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>

于 2012-08-20T19:24:24.263 に答える