Question

我正在尝试在选定的下拉列表上启用/禁用单选按钮。

例如：如果仅选择private void btnEdit_Click(object sender, EventArgs e) { if (dgvGuestList.SelectedRows.Count > 0) { String dgvValue(int cell) { return dgvGuestList.SelectedRows[0].Cells[cell].Value.ToString(); } editGuest editGuest = new editGuest(int.Parse(dgvValue(0)), dgvValue(1), int.Parse(dgvValue(2)), dgvValue(0), dgvValue(0), dgvValue(0), dgvValue(0)); editGuest.ShowDialog(); } else { DialogResult error = MessageBox.Show("No row selected.", "Error", MessageBoxButtons.OK, MessageBoxIcon.Exclamation); } }（persons（安东尼和保罗）必须可用，则必须禁用“休息”

name="persons"

Answer 1

去那里：

$(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结构。

Answer 2

要使其正常工作，您只需检查select的当前值，然后确定必须禁用输入的条件。

纯JS方法

因此，您要做的就是为select元素更改创建一个addEventListener，然后设置条件以禁用具有相同input的关联name所选选项的。然后，使用页面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元素的change事件，然后将禁用所有输入并启用所有与input匹配的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>

Answer 3

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>

Answer 4

工作代码，位于disabled下方，表示从{{ 1}}的类型。

select dropdow

$(document).ready(function(){
  $('select').on('change',function(){
    $('input').prop('checked', false);
    $('input').prop('disabled', true);
    $('input[name="'+$(this).val()+'"]').prop('disabled', false);
  })
})

启用/禁用下拉菜单中的单选按钮已选中？

4 个答案:

纯JS方法

jQuery方法