Question

在以下代码中：

<form>
     <input type="radio" style="disabled:true">Alpha<br>
     <input type="radio" style="enabled:false">Beta<br>
     <input type="radio">Gamma<br>
</form>

1）为什么允许我一次选择多个单选按钮？

2）如何“灰显”特定的单选按钮？ “启用”和“禁用”属性似乎不起作用。

Answer 1

要制作一组单选按钮，请为它们指定相同的名称：

<form>
     <input type="radio" name="group1">Alpha<br>
     <input type="radio" name="group1">Beta<br>
     <input type="radio" name="group1">Gamma<br>
</form>

Demo
要禁用单选按钮，请在其标记中使用disabled属性：

<form>
         <input type="radio" name="group1">Alpha<br>
         <input type="radio" name="group1">Beta<br>
         <input type="radio" name="group1" disabled>Gamma<br>
    </form>

Demo
Disabled不是CSS属性，因此未在style属性中定义如上所述，您还可以将<input>包装在<label>标记中，如下所示：

<form>
             <label><input type="radio" name="group1">Alpha</label><br>
             <label><input type="radio" name="group1">Beta</label><br>
             <label><input type="radio" name="group1" disabled></label>Gamma<br>
        </form>

或者您可以将标签与输入ID：

相关联

<label for="alpha">Alpha</label>
 <input type="radio" name="group1" id="alpha">

然后用户可以单击文本而不是单选按钮。 Demo

Answer 2

禁用的属性不是css样式。你禁用这样的输入：

<form>
     <input type="radio" name="radGroup">Alpha<br>
     <input type="radio" name="radGroup" disabled>Beta<br>
     <input type="radio" name="radGroup">Gamma<br>
</form>

还要注意name属性。这样可以防止一次选择多个单选按钮。组中的每个输入必须共享相同的name

DEMO

Answer 3

一组radiobuttons必须具有相同的相同才能只选择一个：
使用html disabled属性禁用广播<input type="radio" disabled>

所以你的解决方案是：

<form>
     <input type="radio" name="rb1">Alpha<br>
     <input type="radio" name="rb1">Beta<br>
     <input type="radio" name="rb1" disabled>Gamma<br>
</form>

用灰色按钮创建一个简单的单选按钮

3 个答案: