logo标签列表

将单选按钮和文本输入框链接起来

htmlformsinputradio-buttontextinput
6
我正在尝试将单选按钮与指定的文本输入相关联。如图所示，有两个选项。我知道可以使用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>
这是什么编程语言/技术？我知道它至少涉及HTML，但还有其他的吗？ - Zenexer
我认为jQuery是一个不错的解决方案，只是我还不太擅长构建函数。 - chris_s
5个回答
3
你不能使用一个单一的 <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类名称的文本框），并禁用另一个文本框。这样，除非相关的单选按钮被选中，否则不能在任何一个文本框中输入文本。

1
但是楼主提到他们希望两种方式都可以。如果您单击文本字段，它也会选择单选按钮。 - Ascalonian
@Ascalonian 抱歉，我一开始没注意到。但我觉得这会使界面变得不必要的复杂。如果我同时在两个文本框中输入内容，会发生什么？哪个单选按钮被选中？如果我在“$ Off”文本框中输入内容但选择“% Off”单选按钮怎么办？这个表单就会变得更容易出错。 - Brandan
这正是我正在寻找的，但我无法使其工作。我已经使用我的标记编辑了原始帖子。 - chris_s
目前发生的情况是，禁用的单选按钮保持禁用状态，它下面的文本输入仍然可以访问。 - chris_s
你已经禁用了单选按钮，而不是文本字段。我的代码并没有尝试启用和禁用单选按钮，只有文本字段。 - Brandan
显示剩余6条评论
0

这只是一个非常粗略的草图，以帮助您完成编程，但如果您遵循某种命名约定，您可以做出类似于这样的东西：

<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>
0

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>
0

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

如果您想使用jquery，可以参考以下链接：http://api.jquery.com/val/ 和 http://api.jquery.com/focus/

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接