CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mario
mario

Reputation: 1543

Changing display with JQuery not working

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!

Upvotes: 0

Views: 35

Answers (1)

showdev
showdev

Reputation: 29168

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

Upvotes: 1

Related Questions