![](/img/trans.png)
[英]How hide/show enable/disable HTML elements using Javascript/jQuery?
[英]How to enable disable multiple DOM elements using Javascript
我正在嘗試使用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次相同,因此這就是為什么如果我能一次啟用所有功能,則將變得更加簡單。 我嘗試使用帶有控制台的google dev工具...
如果我正確理解了您的問題,則可以通過以下DOMElement方法禁用和啟用HTML中的多個checkbox
輸入;
// 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.