将整个表单 css 变灰

Question

如果可以使用（由 Javascript 控制），我必须将整个表单灰显并禁用它

我的想法是：

<div style="background-color: gray; opacity:0.7; z-index:2;">
       <h:form prependId="false" id="login_form" style="x-index:1;">
             ...button
             ...inputBox
       </h:form>
</div>

但它不能正常工作，事实上 DIV 的灰色仅在背景中，我希望表单中的所有对象（输入框、按钮、文本等）都为灰色

我更喜欢只使用一个 DIV，这样我就不必更改每个对象的样式（禁用按钮、禁用输入框等...）

谢谢

Answer 1

有很多方法可以实现这一点 - 一种简单的、基于纯 CSS 的方法是定义一个 CSS 类 .disable-form 并将其应用于包含您的表单的 <div/>被禁用。

你可以这样做：

.disable-form {

   /* Make form elements appear disabled against grey background */
   background-color: gray;
   opacity:0.5; 

   /* Prevent user interaction with form while disabled */
   pointer-events:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <form prependId="false" id="login_form">
    <div>
      <label>Some field</label>
      <input />
    </div>
    <label>Some field not wrapped in div</label>
    <input />
  </form>
</div>


<br>
<br>
<button id="toggle-disable">Click to toggle form disable</button>
<script>

document.getElementById('toggle-disable')
.addEventListener('click', function() {

   document.getElementById('login_form')
  .parentNode
  .classList
  .toggle('disable-form');   
  
});
</script>

请注意，为了演示技术，我已调整此代码示例中的 HTML - 这里的关键是定义和应用 disable-form CSS 以实现对表单的预期效果。