如何禁用基于动态生成的单选按钮的按钮

可以看到我的单选按钮id是动态的。我想禁用输入类型文件按钮如果我的值value="0"或价值="2";单选按钮而不影响其他部分。

/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
....
/*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>

我是动态加载表单的所以我的单选按钮id是动态的。每个部分包含输入类型文件按钮。我的输入类型文件id将具有相同的id "Button_select_1"因为某些原因。

假设在整个元素集合中一次可以选中一个以上的复选框/单选按钮，您需要一些方法来区分它们作为一个组，否则由于它们都被称为相同的东西，您一次只能选中一个。为此，通常可以删除ID属性，因为它们通常会导致问题，并对单选按钮名称使用name[x]类型语法。如果有无限数量的动态生成的这些，那么在生成节的任何代码中，都可以很容易地在方括号内分配一个数字(或唯一的字符串)。

正如@mplungian所提到的，将元素嵌套在一个共同的父元素中(section是完美的)，处理单选按钮的检查和所需的文件输入的启用/禁用变得非常容易。在这种情况下，绑定到页面的delegated事件监听器将工作，而不管添加到DOM的动态元素的数量，并且事件处理程序中的一些非常简单的代码将找到file input并在检查Yes无线电之外的任何无线电时禁用它。由于这是默认行为，并且默认情况下选择No，因此最初禁用文件输入是有意义的。

name[x]类型语法在处理大型数据集服务器端时也可以帮助，因为x值在数组中充当键!

document.addEventListener('change',e=>{
if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
let bttn=e.target.closest('section').querySelector('[type="file"]');
bttn.disabled=( parseInt( e.target.value )!==1 );
}
})

body{
counter-reset:sections;
}
section:before{
counter-increment:sections;
content:'Section: 'counter(sections)
}

<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response"  name="AnswerResponse[1]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[1]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[1]" type="radio" value="2" /> N/A</label>
</div>
</div>
</section>

<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response"  name="AnswerResponse[2]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[2]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[2]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>

<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[3]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[3]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[3]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>

<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[n]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[n]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[n]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>

这是我的建议

找到所有section中最接近的静态容器并从那里委托-我创建了一个div, id="container">
用class section将每个section包装在div中，以便能够导航到来自相关radio的输入
初始化如果需要-如果无线电可能已经从服务器中选择

这段代码不需要radio和file元素的id。

我还删除了嵌套标签，这是无效的HTML，但这个变化是不相关的问题

document.getElementById("container").addEventListener("click", (e) => {
const tgt = e.target;
if (!tgt.matches("[name=AnswerResponse]")) return; // not a radio
tgt.closest(".section").querySelector("[type=file]").disabled = ["0", "2"].includes(tgt.value)
});
// init: 
document.querySelectorAll(".section").forEach(section => {
const selectedRad = section.querySelector("input[name=AnswerResponse]:checked");
if (selectedRad) {
section.querySelector("[type=file]").disabled = ["0", "2"].includes(selectedRad.value);
}  
})

.section {
border: 1px solid black;
}

<div id="container">
<div class="section">
/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>            <input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
.... /*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>

相关内容

最新更新

热门标签：