javascript - 如何使用 Javascript 启用禁用多个 DOM 元素
问题描述
我正在尝试使用 DOM 操作启用许多单选按钮,以避免每次单击所有按钮以启用它们。
我试试这个:
document.getElementById("on").disabled = true;
和:
on-off-btn.off.active.setAttribute("enable", "");
没有成功。我觉得我做错了吗?我的 HTML 如下所示:
<form>
<div class="on-off-wrapper">
<fieldset class="enabled">
<div label="On" title="on" class="on-off-btn on active">
<input type="radio" id="on" name="on_off" value="on">
<span>On</span></div>
<div label="Off" title="off" class="on-off-btn off">
<input type="radio" id="off" name="on_off" value="on">
<span>Off</span></div></fieldset></div>
</form>
代码总是像这样大约 60 次相同,所以这就是为什么如果我可以一次性启用所有功能会更简单。我尝试使用带有控制台的谷歌开发工具...
解决方案
如果我正确理解您的问题,checkbox
可以通过以下 DOMElement 方法禁用和启用 HTML 中的多个输入;
// To set input disabled
element.setAttribute("disabled", "disabled")
// To set input enabled
element.removeAttribute("disabled")
结合document.querySelectorAll()
,您可以实现您的要求,如下所示:
function disableAll() {
// Select all inputs with name attribute of value on_off and iterate
// applying disabled attribute
document.querySelectorAll('input[name="on_off"]').forEach(element => {
element.setAttribute("disabled", "disabled");
});
}
function enableAll() {
// Select all inputs with name attribute of value on_off and iterate
// removing disabled attribute (to enable)
document.querySelectorAll('input[name="on_off"]').forEach(element => {
element.removeAttribute("disabled");
});
}
<form>
<div class="on-off-wrapper">
<fieldset class="enabled">
<div label="On" title="on" class="on-off-btn on active">
<input type="radio" id="on" name="on_off" value="on">
<span>On</span></div>
<div label="Off" title="off" class="on-off-btn off">
<input type="radio" id="off" name="on_off" value="on">
<span>Off</span></div>
</fieldset>
</div>
</form>
<button onclick="enableAll()">Enable All</button>
<button onclick="disableAll()">Disable All</button>
更新
要实现下面评论中提到的更新切换行为,请参见:
// Select all radio buttons
document.querySelectorAll('input[type="radio"]').forEach(function(input) {
// When any radio button is clicked
input.addEventListener('click', function() {
// 1. Reset all radio buttons to unchecked state
document.querySelectorAll('input[type="radio"]')
.forEach(function(reset) {
reset.checked = false;
});
// 2. Create a CSS selector to select all radio buttons that match the .on or .off
// parent of the current radio button being clicked
const selector = (input.parentElement.classList.contains('on') ? '.on' : '.off') +
' input[type="radio"]';
// 3. Select all radio buttons by selector (ie those that match this radio buttons
// .on or .off parent), and set to checked
document.querySelectorAll(selector).forEach(function(set) {
set.checked = true;
});
})
});
<form>
<div class="on-off-wrapper">
<fieldset class="enabled">
<div label="On" title="on" class="on-off-btn on active">
<input type="radio" id="on" name="on_off" value="on">
<span>On</span></div>
<div label="Off" title="off" class="on-off-btn off">
<input type="radio" id="off" name="on_off" value="on">
<span>Off</span></div>
</fieldset>
</div>
</form>
<form>
<div class="on-off-wrapper">
<fieldset class="enabled">
<div label="On" title="on" class="on-off-btn on active">
<input type="radio" id="on" name="on_off" value="on">
<span>On</span></div>
<div label="Off" title="off" class="on-off-btn off">
<input type="radio" id="off" name="on_off" value="on">
<span>Off</span></div>
</fieldset>
</div>
</form>
<form>
<div class="on-off-wrapper">
<fieldset class="enabled">
<div label="On" title="on" class="on-off-btn on active">
<input type="radio" id="on" name="on_off" value="on">
<span>On</span></div>
<div label="Off" title="off" class="on-off-btn off">
<input type="radio" id="off" name="on_off" value="on">
<span>Off</span></div>
</fieldset>
</div>
</form>
<form>
<div class="on-off-wrapper">
<fieldset class="enabled">
<div label="On" title="on" class="on-off-btn on active">
<input type="radio" id="on" name="on_off" value="on">
<span>On</span></div>
<div label="Off" title="off" class="on-off-btn off">
<input type="radio" id="off" name="on_off" value="on">
<span>Off</span></div>
</fieldset>
</div>
</form>
推荐阅读
- javascript - 为什么我的猫鼬排序方法不起作用?
- nginx - 1&1 IONOS 服务器 - Nginx、Apache2、Plesk 和 Flask 应用程序
- css - 如何在我创建的 npm 包中导入 css
- reactjs - 我无法在 react-native Jest 中运行单元测试?
- reactjs - 未处理的承诺拒绝:未定义不是 Firebase 参考上的函数
- azure - 为 keyvault 的 virualNetworkRules 添加 ARM 模板
- python - 在 Python 中实现 ggplot + glm 误差估计
- python - 允许用户定义变量,并替换为值
- bash - 从带有 x-terminal-emulator 的 bash 脚本启动时,Google Datastore Emulator 进程失效,我该如何防止这种情况发生?
- flask - 烧瓶从另一个表中删除项目