正如你所看到的,我的单选按钮ID是动态的。我想禁用输入类型的文件按钮,如果我的值值=“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”的一些原因。
2条答案
按热度按时间h43kikqp1#
我的建议是
1.找到所有节中最近的静态容器并从那里委托-我用id=“container”创建了一个div
1.将每个部分 Package 在带有类部分的div中,以便能够导航到相关单选按钮的输入
1.如果需要则初始化-如果可能已经从服务器中选择了无线电
使用此代码时,不需要无线电和文件元素的ID。
我还删除了无效HTML的嵌套标签,但此更改与问题无关
ujv3wf0j2#
假设在整个元素集合中一次可以选中多个复选框/单选按钮,您需要一些方法来将它们作为一个组进行区分,否则,由于它们都被称为相同的东西,您将只能一次检查一个。为此,您可以删除ID属性,因为它们通常会导致问题,并对单选按钮名称使用
name[x]
类型语法。如果动态生成的这些部分的数量不受限制,那么在生成这些部分的任何代码中,在方括号内分配一个数字(或唯一字符串)就变得很容易。正如@mplungian所提到的,将元素嵌套在公共父元素中(
section
是完美的)处理单选按钮的检查和所需的文件输入的启用/禁用变得非常容易。delegated
事件侦听器,在本例中绑定到页面,不管添加到DOM的动态元素的数量是多少,都可以正常工作,事件处理程序中的一些非常简单的代码将找到file input
并禁用它(如果有)除Yes
之外的其他选项被选中。由于这是默认行为,并且默认情况下选择了No
,因此最初禁用文件输入是有意义的。name[x]
类型语法在服务器端处理大型数据集时也很有用,因为x
值充当数组中的键!