div实现disabled功能，并过滤不需要disabled的组件

最新推荐文章于 2025-01-03 16:34:19 发布

poppyCL

最新推荐文章于 2025-01-03 16:34:19 发布

阅读量1.3k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/poppyCL/article/details/116135305

版权

本文介绍了如何通过选择器和JavaScript实现div的disabled效果，重点在于利用选择器过滤不需要禁用的组件，主要代码示例展示了如何操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器过滤不需要的组件，例如class，实现div disabled

div本身没有disabled 和 readonly属性
可以通过对其内部组件的属性改变，来实现对整体div的操作

主要代码：

// [选择器]:not([跳过的组件属性])
function change() {
$("displayTableDiv").find("td:not(.skippedTd)");
}

// 从父级筛选就用两层find
$("displayTableDiv").find("td:not(.skippedTd)").find("input[type=checkbox]").prop("disabled", false);

举例：

<div id="displayTableDiv">
	<table>
	  <tr>
	    <td class="skippedTd">
	      <input type="checkbox" value="0"/>
	    </td>
	    <td class="skippedTd">
	      <select id="selectTime"></select>
	    </td>
	  </tr>
	  <tr>
	    <td>
	      <input type="checkbox" value="1"/>
	    </td>
	    <td>
	      <select id="selectDay"></select>
	    </td>
	  </tr>
	</table>
</div>

function change() {
$("displayTableDiv").find("td:not(.skippedTd)").find("input[type=checkbox]").prop("disabled", false);

$("displayTableDiv").find("td:not(.skippedTd)").find("select").prop("disabled", false);
}