如何在选择列表中选择单选按钮

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> 

您可以选择在选择列表中的一个选项，无论单选按钮值“是”或“no”表示是否被按下。
但是，如果按下单选按钮值“是”，则应该只能更改选择列表。
如果按下单选按钮值“否”，则没有人应该能够将其从默认的“ - ”更改。

Answer 1

我正在使用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>

Answer 2

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