【重要】禁用状态设置属于功能性元素,可以附加在已有的样式之上,它作用于其设定的 DOM 结构位置。

【重要】禁用状态仅仅在外观上进行了控制,仍然需要使用 disbaled 属性来限制对象的功能。

  1. 初始外观

    普通表格
    表头 表头 表头 表头
    示例内容 示例内容 示例内容 示例内容
    示例内容 示例内容 示例内容 示例内容
    示例内容 示例内容 示例内容 示例内容
    示例内容 示例内容 示例内容 示例内容
  2. 设置后外观

    普通表格
    表头 表头 表头 表头
    示例内容 示例内容 示例内容 示例内容
    示例内容 示例内容 示例内容 示例内容
    示例内容 示例内容 示例内容 示例内容
    示例内容 示例内容 示例内容 示例内容
    <button class="e_dis"><span>普通按钮</span></button>
    <span class="e_input e_dis"><span><input type="text" /></span></span>
    <div class="c_box e_dis"> <div class="c_title"> ... </div> <div class="c_table"> ... </div> </div>
  3. 扩展功能

    1. 批量禁用

      同时禁用 A、C、E 表单项

      • 提示文字A:
      • 提示文字B:
      • 提示文字C:
      • 提示文字D:
      • 提示文字E:
      • 提示文字F:

      代码分两步,首先给需要隐藏的对象预设标记。

      <div class="c_form c_form-label-5 c_form-col-2">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">提示文字A:</span>
      			<span class="e_input e_disX"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字B:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字C:</span>
      			<span class="e_input e_disX"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字D:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字E:</span>
      			<span class="e_input e_disX"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字F:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      	</ul>
      </div>
      

      然后,在需要批量禁用的时候,动态地给在它们的某一父(或者祖先)节点上设置 e_dis-x。

      <div class="c_form c_form-label-5 c_form-col-2 e_dis-x">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">提示文字A:</span>
      			<span class="e_input e_disX"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字B:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字C:</span>
      			<span class="e_input e_disX"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字D:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字E:</span>
      			<span class="e_input e_disX"><span><input type="text" /></span></span>
      		</li>
      		<li class="li">
      			<span class="label">提示文字F:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      	</ul>
      </div>
      

      这样的设置方法,是可以跨组件进行的。