在JQuery不起作用的情况下更改显示

Changing display with JQuery not working

本文关键字：显示 情况下 JQuery 不起作用      更新时间：2023-09-26

我试图让类为"manual_override_warning"的div不可见，除非用户选择id为"manual _override_yes"的单选按钮，但当我点击按钮时，什么也没发生，我看不出哪里出了问题。我已经尝试过使用.css（）、.show（）和.prp（），但都无法使用。

这是我目前的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");
            }
    });
});

这是html:

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

这是css：

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

如有任何帮助，我们将不胜感激！谢谢大家！

您可以在单选按钮的change事件上放置一个监听器。为了简洁起见，我选择了它们的名称，而不是id或类。然后根据更改后的单选按钮的值设置警告消息的display。

<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);
});

的工作示例

相关文章：