链接单选按钮和文本输入

Question

我正在尝试将无线电输入与指定的文本输入相关联。正如您在图片中看到的，有两个选项。我知道我可以使用for=""将标签与单选输入相关联，但是我如何将它与下面的文本输入相关联，反之亦然，所以当我专注于文本输入时，如果聚焦正确的单选按钮？

注意：输入的金额将被插入到数据库中，因此这是此表格中最重要的部分。目前，如果我点击 $Off，我仍然可以在 %Off 中输入一个数字。我不希望这种情况发生，因此用户不会感到困惑。

我的标记：

<div class="row-fluid control-group">
  <div class="span7 pull-left">
    <label class="radio" for="discount-dollars">
      <input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
      &#36; Off
    </label>
    <div class="input-append">
      <input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
      <span class="add-on">.00</span>
    </div>
  </div><!-- .span7 .pull-left -->

  <div class="span5">
    <label class="radio" for="discount-percent">
      <input type="radio" name="discount" id="discount-percent" value="percent">
      &#37; Off
    </label>
    <input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
  </div>
</div><!-- .row-fluid .control-group -->

<script type="text/javascript">

$(function (){
  $("form input[type=radio]").click(function (){

  // get the value of this radio button ("dollars" or "percent")
  var value = $(this).val();

  // find all text fields...
  $(this).closest("form").find("input[type=text]")

    // ...and disable them...
    .attr("disabled", "disabled")                     

  // ...then find the text field whose class name matches
  // the value of this radio button ("dollars" or "percent")...
  .end().find("." + value)

    // ...and enable that text field
    .removeAttr("disabled")          
  .end();
  });
});

</script>

Answer 1

您不能使用单个<label>元素来标记两个单独的输入。我建议将标签与单选按钮相关联，因为单选按钮是一个很小的点击目标，而标签会扩展该目标。

选择默认选择的无线电之一，可能是“$ Off”。默认情况下禁用其他文本字段：

<div class="row-fluid control-group">
  <div class="span7 pull-left">
    <label class="radio" for="discount-dollars">
      <input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
      &#36; Off
    </label>
    <div class="input-append">
      <input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
      <span class="add-on">.00</span>
    </div>
  </div><!-- .span7 .pull-left -->

  <div class="span5">
    <label class="radio" for="discount-percent">
      <input type="radio" name="discount" id="discount-percent" value="percent">
      &#37; Off
    </label>
    <input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
  </div>
</div><!-- .row-fluid .control-group -->

然后使用 jQuery 来做这样的事情：

$(function (){
  $("#discount-dollars, #discount-percent").click(function (){

    // get the value of this radio button ("dollars" or "percent")
    var value = $(this).val();

    // find all text fields...
    $(this).closest(".control-group").find("input[type=text]")

      // ...and disable them...
      .attr("disabled", "disabled")                     

    // ...then find the text field whose class name matches
    // the value of this radio button ("dollars" or "percent")...
    .end().find("." + value)

      // ...and enable that text field
      .removeAttr("disabled")          
    .end();
  });
});

基本上，这会监听click两个单选按钮上的事件。当您单击一个单选按钮时，它会启用其关联的文本字段（即 CSS 类名称与单选按钮的值匹配的文本字段）并禁用其他文本字段。这样，除非选中其关联的单选按钮，否则您无法在任一文本字段中输入文本。