Question

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

Radio and text input

注意：输入的金额将插入到数据库中，因此这是此表单中最重要的部分。目前，如果我点击$ 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类名称与单选按钮的值匹配的文本字段）并禁用其他文本字段。这样，除非选中相关的单选按钮，否则无法在任何文本字段中输入文本。

Answer 2

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

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

Answer 3

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

Answer 4

这是一个非常粗略的草图来帮助你，但你可以做这样的事情（让你遵循一定的命名惯例）：

<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> &nbsp; <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> &nbsp; <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
$ text box：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>

链接单选按钮和文本输入

5 个答案: