英文:
disable entire section of checkboxes if a check box is clicked
问题
我想禁用一部分复选框，如果单击“不感兴趣”复选框。以下是我的代码：
<div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> 不感兴趣
</div>
<div class="form-group row" id="reassignChecks">
@for (var i = 1; i <= 10; i++)
{
<input name="AreChecked" type="checkbox" value="@i" /> @i
<br />
}
<button>点击</button>
</div>
我有以下JavaScript代码：
function Reassign(cb) {
if (cb.checked == true) {
document.getElementById('reassignChecks').disabled = true;
} else {
document.getElementById('reassignChecks').disabled = false;
}
}
如果我点击“不感兴趣”复选框，我想禁用具有ID“reassignChecks”的整个部分，但使用上面的JavaScript，这不起作用。如果单击“不感兴趣”复选框，我不希望单击“reassignChecks”部分中的任何复选框。下面是屏幕截图：
英文:
I want to disable a section of checkboxes if the "not interested" check box is clicked. below is my code:
<div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested
</div>
<div class="form-group row" id="reassignChecks">
@for (var i = 1; i <= 10; i++)
{
<input name="AreChecked" type="checkbox" value="@i" /> @i
<br />
}
<button>Click</button>
</div>
I have the following JavaScript:
function Reassign(cb) {
if (cb.checked == true) {
document.getElementById('reassignChecks').disabled = true;
} else {
document.getElementById('reassignChecks').disabled = false;
}
}
if I click on "Not Interested" check box then I want to disable the entire section that has an ID of "reassignChecks", but with the above JavaScript, this is not working. I dont want any of the checkboxes to be clicked in the reassignChecks section if Not Interested check box is clicked. below is the screen shot:
答案1
得分: 1
请尝试以下代码：
function Reassign(cb) {
if (cb.checked == true) {
document.getElementById("reassignChecks").disabled = true;
var nodes = document.getElementById("reassignChecks").getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
nodes[i].setAttribute('disabled', true);
}
} else {
document.getElementById("reassignChecks").disabled = false;
var nodes = document.getElementById("reassignChecks").getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
nodes[i].removeAttribute('disabled');
}
}
}
<div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested
</div>
<div class="form-group row" id="reassignChecks">
@for (var i = 1; i <= 10; i++) {
<input name="AreChecked" type="checkbox" value="@i" /> @i
<br />
}
<button>Click</button>
</div>
英文:
Try this one-
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function Reassign(cb) {
if (cb.checked == true) {
document.getElementById("reassignChecks").disabled = true;
var nodes = document.getElementById("reassignChecks").getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
nodes[i].setAttribute('disabled', true);
}
} else {
document.getElementById("reassignChecks").disabled = false;
var nodes = document.getElementById("reassignChecks").getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
nodes[i].removeAttribute('disabled');
}
}
}
<!-- language: lang-html -->
<div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested
</div>
<div class="form-group row" id="reassignChecks">
@for (var i = 1; i <= 10; i++)
{
<input name="AreChecked" type="checkbox" value="@i" /> @i
<br />
}
<button>Click</button>
</div>
<!-- end snippet -->
答案2
得分: 1
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
function Reassign(cb) {
if (cb.checked)
{
$('#reassignChecks').addClass('disableSection');
}
else
{
$('#reassignChecks').removeClass('disableSection');
}
}
<!-- 语言: lang-css -->
.disableSection{
pointer-events: none;
}
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> 不感兴趣
</div>
<div class="form-group row" id="reassignChecks" >
@for (var i = 1; i <= 10; i++)
{
<input name="AreChecked" type="checkbox" value="@i" /> @i<br />
}
<button>点击</button>
</div>
<!-- 结束代码段 -->
请尝试这段代码。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function Reassign(cb) {
if (cb.checked)
{
$('#reassignChecks').addClass('disableSection');
}
else
{
$('#reassignChecks').removeClass('disableSection');
}
}
<!-- language: lang-css -->
.disableSection{
pointer-events: none;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested
</div>
<div class="form-group row" id="reassignChecks" >
@for (var i = 1; i <= 10; i++)
{
<input name="AreChecked" type="checkbox" value="@i" /> @i<br />
}
<button>Click</button>
</div>
<!-- end snippet -->
Try this code.
答案3
得分: 0
First: 对于一个 div 元素，它没有一个 disable 属性供您控制禁用；
Second: 您可以通过向 div 添加或移除 CSS 类来实现此功能，CSS 属性是 pointer-events
.disable-region{
pointer-events: none;
}
以及其他颜色属性来模拟禁用功能。
英文:
First:For a div dom ,it has not a disable attribute for you to control disable;
Second: You should realize this by add or remove a css from the div,the css property is pointer-events
.disable-region{
pointer-events: none;
}
and other color properties to imitate the disable function
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论