Changing display with JQuery not working

Question

I'm trying to have a div with class of "manual_override_warning" be invisible unless the user chooses the radio button with id "manual_override_yes" but nothing happens when I click on the button and I can't see where I'm going wrong. I have tried using .css(), .show(), and .prop() and haven't been able to get any to work.

Here is my current js:

$(document).ready(function(){

    $(document.body).on('keypress keydown keyup change click',
        '#manual_override_yes, #manual_override_no', function() {
            if($("#manual_override_yes").prop('checked', true)) {
                $(".manual_override_warning").css("display", "block");
            }
    });

});

Here is the html:

 <div class="manual_override_warning">Manual Override is Enabled. Autocompletion has been turned off.</div>

And here is the css:

.manual_override_warning{
    background-color: red;
    color: white;
    text-align: center;
    font-style: italic;
    line-height: 2em;
    display: none;
}

Any and all help would be greatly appreciated! Thanks guys!

How about just changing that mess out with the event that is actually intended for radio buttons, the change event ? — adeneo
– adeneo, Commented Apr 24, 2014 at 17:48
Would it make any difference if I tried using a select instead? — mario
– mario, Commented Apr 24, 2014 at 18:03

showdev · Accepted Answer · 2014-04-24 18:02:31Z

1

You can put a listener on the change event for the radio buttons. For the sake of brevity, I have selected them by name rather than by id or class. Then set the display of the warning message based on the value of the changed radio button.

<div class="manual_override_warning">
  Manual Override is Enabled. Autocompletion has been turned off.
</div>    

<label><input type="radio" name="manual_override" value="yes" /> Yes</label>
<label><input type="radio" name="manual_override" value="no" checked="checked" /> No</label>

$(document).on('change', 'input[name=manual_override]', function() {
    var display=$(this).val()=='yes'?"block":"none";
    $(".manual_override_warning").css("display",display);
});

WORKING EXAMPLE

answered Apr 24, 2014 at 18:02

showdev

29.3k37 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing display with JQuery not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related