javascript - Greyout 整个表单 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 以实现对表单的预期影响。