Question

我有一组单选按钮，每个按钮都有自己的标签。标签宽度设置为auto，这就是我想要的，因为将来文本长度可能会增加。

如果我点击标签，它将选择相应的单选按钮。据我了解，这是默认的HTML行为。是否有任何简单的（简单地说我的意思是最好不使用Javascript）方式来抑制这种默认行为？这样我只能通过单击灰色圆圈来选择单选按钮吗？

Answer 1

要更改此行为，首先需要了解如何将复选框/无线电元素与https://www.googleapis.com/auth/youtube.force-ssl相关联。如果您了解这一点，那么您可以确保<label>元素与<input>元素没有关联，以防止它被选中。

主要有两种方式：

使用<label>元素包装<input>元素，以隐式关联元素：

＆＃13;

<label>

＆＃13;

将<p>Wrapping the input elements with a label will cause the input element to be selected when clicking on the label.</p> <label> <input type="radio" name="confirm" />Initial Decision </label> <label> <input type="radio" name="confirm" />Confirmation </label>元素的<input>与id元素的<label>属性相关联，以明确关联元素：

＆＃13;

for

＆＃13;

因此，只需不关联元素，就可以有效地防止在单击<p>If the input element's id matches the label element's for attribute, then clicking on a label element will select the corresponding input element:</p> <input type="radio" id="initial" name="confirm" /> <label for="initial">Initial Decision</label> <input type="radio" id="confirm" name="confirm" /> <label for="confirm">Confirmation</label>元素时选择无线电元素：

＆＃13;

<label>

＆＃13;

Answer 2

如何通过单击标签来阻止选择单选按钮？

使用这段代码：

.lbl-ungroup {overflow:hidden; position:relative; }
.lbl-ungroup:after {content:" ";position:absolute; height:100%;width:100%;left:0;}
.lbl-ungroup label input[type=radio] {position:relative; z-index:1;}

   
  
    <style>
        .lbl-ungroup {overflow:hidden; position:relative; }
        .lbl-ungroup:after {content:" ";position:absolute; height:100%;width:100%;left:0;}
        .lbl-ungroup label input[type=radio] {position:relative; z-index:1;}
</style>

    <div class="lbl-ungroup">
      
        <label><input type="radio" name="rbtgroup"> Male</label>
        <label><input type="radio" name="rbtgroup"> Female</label>
        <label><input type="radio" name="rbtgroup"> Other</label>


    </div>

如何通过单击标签来阻止选择单选按钮

2 个答案:

如何通过单击标签来阻止选择单选按钮？