Question

如果有任何拼写错误，我是德国人。

我网站的用户应该说，他在哪个班级。由于他可能不再上学，我有一个单选按钮。他说，他是否上学：

<h2>Are you in school?</h2><br>
<input type="Radio" name="ClassRadio" value="No">I'm not any more in school.<br>
<input type="Radio" name="ClassRadio" value="Yes">Yes, in class

这就是问题：在“课堂上”之后应该有一个选择列表，包括1,2,3等但如果我列出这个清单

<select name="KlasseOption" size="1">
    <option value="1">1</option>
    <option value="2">2</option>
    etc.
</select>

无论按下单选按钮值“是”还是值“否”，您都可以选择选择列表中的一个选项。
但是，如果按下单选按钮值“是”，则应该只能更改选择列表如果按下单选按钮值“否”，则任何人都无法从默认的“ - ”更改它。

Answer 1

您可以使用简单的JavaScript来实现这一目标。只需检查值是否已更改，然后禁用或启用选择标记。

Answer 2

我正在使用jQuery来更轻松地解决问题。

Css解决方案（仅适用于现代浏览器）

select {
  opacity:0.5;
  pointer-events:none;
}

#radio2:checked ~ select {
  opacity:1;
  pointer-events:initial;
}

<h2>Are you in school?</h2><br>
<input id="radio1" type="Radio" name="ClassRadio" value="No"><label for="radio1">I'm not any more in school.</label><br>
<input id="radio2" type="Radio" name="ClassRadio" value="Yes" class="yes"><label for="radio2">Yes, in class</label>

<select name="KlasseOption" size="1">
  <option value="1">1</option>
  <option value="2">2</option>
  etc.
</select>

常规（javascript）跨浏览器解决方案

<强>逻辑：

当用户检查单选按钮时，检查它是否有.yes类（我添加了）。如果是，我使用prop函数启用下拉列表。

$(function(){
  $('input').change(function() {
    $('[name=KlasseOption]').prop('disabled', !$(this).is('.yes'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Are you in school?</h2><br>
<label><input type="Radio" name="ClassRadio" value="No">I'm not any more in school.</label><br>
<label><input type="Radio" name="ClassRadio" value="Yes" class="yes">Yes, in class</label>

<select name="KlasseOption" size="1" disabled>
    <option value="1">1</option>
    <option value="2">2</option>
    etc.
</select>

如果选中单选按钮，如何在选择列表中进行选择

2 个答案: