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

juzqafwq  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(138)

正如你所看到的，我的单选按钮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”的一些原因。

JavaScript

2条答案

按热度按时间
h43kikqp

h43kikqp1#

我的建议是
1.找到所有节中最近的静态容器并从那里委托-我用id=“container”创建了一个div
1.将每个部分 Package 在带有类部分的div中，以便能够导航到相关单选按钮的输入
1.如果需要则初始化-如果可能已经从服务器中选择了无线电
使用此代码时，不需要无线电和文件元素的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>
赞(0）分享  回复(0）举报  2023-01-01
ujv3wf0j

ujv3wf0j2#

假设在整个元素集合中一次可以选中多个复选框/单选按钮，您需要一些方法来将它们作为一个组进行区分，否则，由于它们都被称为相同的东西，您将只能一次检查一个。为此，您可以删除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>
赞(0）分享  回复(0）举报  2023-01-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com