如何根据动态生成的单选按钮禁用我的按钮

【问题标题】：How to disable my button based on dynamically generated radio buttons如何根据动态生成的单选按钮禁用我的按钮
【发布时间】：2022-12-31 19:06:01
【问题描述】：

如您所见，我的单选按钮 ID 是动态的。 如果我的值 value="0" 或 value="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 将具有与“Button_select_1”相同的 ID。

【问题讨论】：

  • id属性必须具有唯一值，如果需要标识&lt;input type="file"&gt;，则使用class属性代替。
  • 也不要嵌套你的标签

标签： javascript html


【解决方案1】：

这是我的建议

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

    使用此代码，不需要无线电和文件元素的 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>

【讨论】：

    【解决方案2】：

    假设在整个元素集合中一次可以检查超过 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>

    【讨论】：

      猜你喜欢
      • 2017-06-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-08-13
      • 2016-09-01
      • 1970-01-01
      • 2011-11-19
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode