选择下拉菜单上的启用/禁用单选按钮？

Posted

技术标签:

【中文标题】选择下拉菜单上的启用/禁用单选按钮？【英文标题】：Enable/Disable Radio button on dropdown selected? 【发布时间】：2020-10-18 13:01:06 【问题描述】：

我正在尝试启用/禁用选中的下拉单选按钮。

jsfiddle link

例如：如果选择了 persons，则只有 name="persons" 必须可供选择（Anthony 和 Paul），则必须禁用 Rest

        <select class="browser-default" id="type" name="type">
        <option value="persons">persons</option>
        <option value="animals">animals</option>
        <option value="fruits">fruits</option>
        </select>

        <br/>

        <label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
        <br/>
        <label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
        <br/>

        <label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
        <br/>
        <label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
        <br/>


        <label><input type="radio" name="persons" value="anthony" id="anthony" >Anthony</label>
        <br/>
        <label><input type="radio" name="persons" value="paul" id="paul" >Paul</label>
        <br/>

【问题讨论】：

Create a minimal reproducable example 【参考方案1】：

要完成这项工作，您只需要检查select 的当前值，然后设置必须禁用输入的条件。

纯 JS 方法

因此，您所要做的就是为您的select 元素更改addEventListener，然后使用所选选项的相同name 设置禁用关联inputs 的条件。然后在页面onload事件中，我们将通过event constructor触发select的change事件，以确保我们的事件监听器在页面加载时运行一次。

const select = document.getElementById("type");
const inputs = document.querySelectorAll("input[type='radio']");

window.onload = function() 
  select.dispatchEvent(new Event('change'));


select.addEventListener("change", function() 
  inputs.forEach(input => 
    input.checked = false;
    if (input.getAttribute("name") !== this.value) 
      input.setAttribute("disabled", true);
     else 
      input.removeAttribute("disabled");
    
  )
)
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br />

<label><input type="radio" name="fruits" value="apple" id="apple" title="">Apple</label>
<br />
<label><input type="radio" name="fruits" value="banana" id="banana" title="">Banana</label>
<br />

<label><input type="radio" name="animals" value="dog" id="dog" title="">Dog</label>
<br />
<label><input type="radio" name="animals" value="cat" id="cat" title="">Cat</label>
<br />


<label><input type="radio" name="persons" value="anthony" id="anthony" title="">Anthony</label>
<br />
<label><input type="radio" name="persons" value="paul" id="paul" title="">Paul</label>
<br />

jQuery 方法

这与纯方法几乎相同，只是由 jQuery 实现。在这里，我们将监听 select 元素的更改事件，然后我们将禁用所有输入并启用所有匹配的 inputs 值和 select 值。最后，我们将调用trigger 事件来确保我们的选择会在页面加载时更改一次。

$(document).ready(function() 
  $("select").change(function() 
    $("input").prop("checked", false);
    $("input").prop('disabled', false);
    $("input[type='radio']").prop("disabled", true);
    $("input[name='" + $(this).val() + "']").prop("disabled", false);
  ).trigger("change");
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
<label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
<label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
<label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
<label><input type="radio" name="persons" value="anthony" id="anthony">Anthony</label>
<label><input type="radio" name="persons" value="paul" id="paul">Paul</label>

【讨论】：

【参考方案2】： 

const type = document.querySelector("#type");
const radios = document.querySelectorAll("#radio-group input[type=radio]");

function toggleDisabled() 
  radios.forEach(r => r.disabled = r.name !== type.value);


type.addEventListener("change", toggleDisabled);

toggleDisabled();
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<div id="radio-group">
  <label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
  <br/>
  <label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
  <br/>

  <label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
  <br/>
  <label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
  <br/>


  <label><input type="radio" name="persons" value="anthony" id="anthony" >Anthony</label>
  <br/>
  <label><input type="radio" name="persons" value="paul" id="paul" >Paul</label>
</div>

【讨论】：

【参考方案3】：

Working code 下面是 disabled 的单选按钮，用于更改基于 select dropdow 的值关于流派的类型。

$(document).ready(function()
  $('select').on('change',function()
    $('input').prop('checked', false);
    $('input').prop('disabled', true);
    $('input[name="'+$(this).val()+'"]').prop('disabled', false);
  )
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<label><input type="radio" name="fruits" value="apple" id="apple" disabled="true">Apple</label>
<label><input type="radio" name="fruits" value="banana" id="banana" disabled="true">Banana</label>
<label><input type="radio" name="animals" value="dog" id="dog" disabled="true">Dog</label>
<label><input type="radio" name="animals" value="cat" id="cat" disabled="true">Cat</label>
<label><input type="radio" name="persons" value="anthony" id="anthony">Anthony</label>
<label><input type="radio" name="persons" value="paul" id="paul">Paul</label>

【讨论】：

【参考方案4】：

你去吧：

$(document).ready(function()
  $('select').on('change',function()
    $('input').attr('disabled',true)
    $('input[name="'+$(this).val()+'"]').removeAttr('disabled')
  )
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
<label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
<label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
<label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
<label><input type="radio" name="persons" value="anthony" id="anthony" >Anthony</label>
<label><input type="radio" name="persons" value="paul" id="paul" >Paul</label>

但是你应该改变你的 DOM 结构。

【讨论】：

谢谢。可以禁用而不是隐藏 你现在拥有它。

以上是关于选择下拉菜单上的启用/禁用单选按钮？的主要内容，如果未能解决你的问题，请参考以下文章

启用/禁用选择/下拉菜单和下拉单选按钮？

使用单选按钮使用Foreach循环禁用下拉菜单

根据正确选择的单选按钮显示下拉菜单

改进单选按钮的使用以启用/禁用表单字段

在选中单选按钮之前禁用输入字段（HTML）

如何使 Bootstrap 单选按钮继续进入下拉菜单