链接单选按钮和文本输入

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

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

选择默认选择的无线电之一，可能是“$ 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">
      $ 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">
      % 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 类名称与单选按钮的值匹配的文本字段）并禁用其他文本字段。这样，除非选中其关联的单选按钮，否则您无法在任一文本字段中输入文本。

Answer 2

使用具有 2 种状态的图像单选按钮，选中和未选中，当您单击单选图像时，只需将焦点设置到文本框并交换到所选的单选图像，反之亦然。

Answer 3

您不能专注于两个元素，它将是输入文本字段或单选按钮。
但是，当您单击单选按钮以关注下面的字段时，或者当您在下面的字段中输入值以检查上面的单选按钮时，您应该使用 JavaScript 或 jQuery。

如果您想使用jquery，这可以帮助您： http://api.jquery.com/val/ 和 http://api.jquery.com/focus/

Answer 4

这是一个非常粗略的草图，可以帮助您，但是您可以这样做（让您遵循一定的命名约定）：

<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/>   <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/>   <input type="text" name="textPctOff" id="textPctOff" onclick="changeMe(this);"/>

<script>
    function changeMe(inField) {
        var fieldId = inField.id;
        var type = fieldId.substring(0, 4);

        if(type == 'text') {
            var name = fieldId.substring(4);
            var radioButton = document.getElementById("radio" + name);
            radioButton.checked = true;
        }else {
            var name = fieldId.substring(5);
            var textField = document.getElementById("text" + name);
            textField.focus();
        }
    }
</script>

Answer 5

jQuery 就是你想要的。假设您的元素具有如下 ID：

• $ 单选按钮：money-radio
• $ 文本框：money-text
• % 单选按钮：percent-radio
• % 文本框：percent-text

...代码可能如下所示。这将负责禁用文本框并正确聚焦输入。

<form>
    <table>
        <tr>
            <td>
                <input type="radio" id="money-radio" name="unit" value="money" />
                <label for="money-radio">$ Off</label>
            </td>
            <td>
                <input type="radio" id="percent-radio" name="unit" value="percent" />
                <label for="percent-radio">% Off</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="money-text" name="money-off" />
            </td>
            <td>
                <input type="text" id="percent-text" name="percent-off" />
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    $(function() {
        $('#percent-radio, #money-radio').change(function() {
            if ($('#percent-radio').val() == true) {
                $('#percent-text').removeAttr('disabled').focus();
            } else {
                $('#percent-text').attr('disabled', 'disabled');
            }

            if ($('#money-radio').val() == true) {
                $('#money-text').removeAttr('disabled').focus();
            } else {
                $('#money-text').attr('disabled', 'disabled');
            }
        }).change();
    });
</script>