Home/ Questions/Q 8416979
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T01:55:04+00:00

I am trying to use jQuery to show and hide a div when the

  • 0

I am trying to use jQuery to show and hide a div when the user clicks on the appropriate checkbox. This works correctly, but for whatever reason the check never shows up in the box. Any suggestions?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t bind to the toggle on the p. Bind to the change on the checkbox:

    I changed the HTML to:

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

    Then the script to:

    $('#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/

    • 0