我想禁用 Fieldset 中的所有元素,但启用其中的几个按钮。 Demo:
<fieldset ng-disabled="true">
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
<input type="button" value="See More (Enable this!!) " ng-click="ButtonClicked1()" ng-disabled="false"/>
Somethingelse: <input type="text">
<input type="button" value="View Details " ng-click="ButtonClicked2()"/>
</fieldset>
最佳答案
我有 3 个解决方案:
解决方案 1:<details>
和 <summary>
在您的示例中,您可能应该使用 <details>
和 <summary>
元素:
label {
display: block;
}
<fieldset disabled>
<legend>
Personalia:
</legend>
<label>Name: <input></label>
<label>Email: <input></label>
<label>Date of birth: <input></label>
<label>Somethingelse: <input></label>
<details>
<summary>View Details</summary>
<p>A more detailed description</p>
</details>
</fieldset>
解决方案 2:将按钮放在 <legend>
中
如果您没有透露更详细的信息,但您想切换字段集的禁用,那么您可以将切换按钮放在 <legend>
element 中。
const fieldset = document.querySelector("fieldset");
const toggleButton = document.getElementById("toggle-button");
toggleButton.addEventListener("click", (event) => {
fieldset.disabled = !fieldset.disabled;
toggleButton.textContent = fieldset.disabled ? "Enable" : "Disable";
toggleButton.setAttribute("aria-pressed", `${!fieldset.disabled}`);
});
label {
display: block;
}
<fieldset disabled>
<legend>
Personalia:
<button id="toggle-button" aria-pressed="true">
Enable
</button>
</legend>
<label>Name: <input></label>
<label>Email: <input></label>
<label>Date of birth: <input></label>
<label>Somethingelse: <input></label>
<button>This may be disabled</button>
</fieldset>
解决方案 3:使用“假”按钮
如果您的用例完全不同,您可以使用 aria-roles 来“伪造”一个按钮 role="button"
(参见 ARIA button role)。请记住添加必要的辅助功能,使没有显示屏或鼠标的用户可以点击此按钮。重要的属性是 role="button"
(用于屏幕阅读器)和 tabindex="0"
(用于键盘导航),还记得为 keypress
添加处理程序Enter 和 Space 以防您的用户没有鼠标。
const disabledButton = document.querySelector('.disabled-button');
const disabledOutput = document.querySelector('.disabled-output');
const enabledButton = document.querySelector('.enabled-button');
const enabledOutput = document.querySelector('.enabled-output');
function increment(output) {
const current = Number.parseInt(output.textContent);
output.textContent = `${current + 1}`;
}
disabledButton.addEventListener('click', () => increment(disabledOutput));
disabledButton.addEventListener('keypress', event => {
if (['Enter', ' '].includes(event.key)) {
increment(disabledOutput);
}
});
enabledButton.addEventListener('click', () => increment(enabledOutput));
enabledButton.addEventListener('keypress', event => {
if (['Enter', ' '].includes(event.key)) {
increment(enabledOutput);
}
});
label {
display: block;
}
[role="button"] {
-webkit-appearance: button;
appearance: button;
cursor: default;
font-style: normal;
-webkit-user-select: none;
user-select: none;
}
<fieldset disabled>
<legend>Disabled form elements</legend>
<label>Input 1<input name="input 1"></label>
<label>Input 2<input name="input 2"></label>
<button
class="disabled-button"
name="disabled-button"
>
This is disabled
</button>
<i
class="enabled-button"
role="button"
tabindex="0"
>
This is enabled
</i>
</fieldset>
<label>
Disabled button clicks:
<output class="disabled-output">0</output>
</label>
<label>
Enabled button clicks:
<output class="enabled-output">0</output>
</label>
关于javascript - 如何在禁用的字段集中启用一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25446225/