Question

处理this form - form A尝试复制this one - form B中所见的相同行为。在表单B中，如果您点击每个选项的<label>，则为just works，而在表单B中，如果您要制作，则必须点击<input>元素中的每一个一个不同的选择。为什么？

两个样本都没有包含CSS，没有加载CSS库，它只是HTML

表格A

<form accept-charset="UTF-8" class="edit_order" id="edit_order_260" method="post">
  <div style="display:none">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="N+XdGRhPcpB+999PYEU5Bs5bvdBYkLd4Ko+cNdhoppA=">
  </div>

  <h3 class="panel-title">
                  <label for="order_Best price"><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">
                  Best price</label>
                </h3>

  <h3 class="panel-title">
                  <label for="order_Best delivery date"><input id="order_delivery_option_best_delivery_date" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_delivery_date">
                  Best delivery date</label>
                </h3>

</form>

表格B

  <form role="form">
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
  </form>

Answer 1

只需从标签中删除for属性即可。例如：

<label><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">Best price</label>

或使for值与相应id标记的input属性的值相匹配。像这样：

<label for="order_delivery_option_best_price"><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">Best price</label>

在这种情况下，您不必将输入嵌套在标签内，它仍然可以工作：）

无法单击<label>以选择表单中的单选选项

1 个答案: