Question

鉴于此html：

<form action="">
    <div id="choices">
        <input type="radio" name="stype" id="opt1" value="input1_div" checked=""/> Opt1
        <input type="radio" name="stype" id="opt2" value="input2_div"/> Opt2
    </div>
    <div id="stypes">
        <div id="input1_div">
            <input type="text" id="input1" name="input1" placeholder="input1"/>
        </div>
        <div id="input2_div" style="display: none;">
            <input type="text" id="input2" name="input2" placeholder="input2" disabled=""/>
        </div>
    </div>
    <div id="#sbutton">
        <input type="submit" id="input3" value="Submit"/>
    </div>
</form>

我使用以下jQuery根据所选input按钮隐藏/停用radio字段：

jQuery('#choices input').each(function() {
    var item = this;
    $(this).click(function() {
        if($('input[type=radio][name=stype]').is(':checked')) {
            $('#stypes > div').hide();
            $('#stypes input').not("#sbutton").prop('disabled', true);
            $('#' + $(item).val()).fadeIn();
            $('#' + $(item).val() + ' input').prop('disabled', false);
        }
    });
});

此jsfiddle中的多功能一体机。

我特别不确定将radio value纳入id selector的技巧：

$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);

这样做的正确方法是什么？关于我jQuery的其他提示？

Answer 1

首先，您不需要复杂的jQuery.each循环来绑定点击并定义this。在每个事件中，处理程序this将是函数的调用者。在你的情况下，所有这些都有click功能就足够了。

正如你在评论中所说，这只是介绍的问题。我更喜欢有一个字段而不是两个字段。即使我更喜欢为此文字输入设置固定name，但为了使其与您的示例非常相似，我相应地更改了name和placeholder。

$(function(){
  $('#choices input').click(function() {
      var newName = $(this).val(),
          newPlaceholder = $(this).attr("data-placeholder");
      $('#interchangable_input[name!='+newName+']').hide()
        .attr("name", newName)
        .attr("placeholder", newPlaceholder)
        .fadeIn();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
        <div id="choices">
            <input type="radio" name="stype" id="opt1" data-placeholder="Input one" value="input1" checked=""/> <label for="opt1">Opt1</label>
            <input type="radio" name="stype" id="opt2" data-placeholder="Input two" value="input2"/> <label for="opt2">Opt2</label>
        </div>
        <div id="stypes">
            <input type="text" id="interchangable_input" name="input1" placeholder="Input one"/>
        </div>
        <div id="#sbutton">
            <input type="submit" id="input3" value="Submit"/>
        </div>
    </form>

更多建议：

您可以在单选按钮或复选框中为每个选项标签使用<label for="target id">。即使用户点击标签而不是按钮本身，它也可以与click事件处理程序一起使用。
您可以在data-*中将某些信息隐藏为html5属性。您无需使用value。

多个项目的更新

如果表格中有多个项目组，我可以想象一个包含不同部分或页面的表单。 <fieldset>可用于对这些项目进行分组。在 HTML5 中，当您使用jquery更改表单页面时，您可以通过<fieldset disabled>禁用fieldset标记。（IE浏览器除外）。由于此异常，我们需要禁用子表单中的所有项。为了处理这个部分，我定义了一个适用于所有表单输入的类.form-element。您也可以使用<div>代替<fieldset>，然后您需要跟踪其启用/停用状态。

$(function(){
  // initialization by disabling form-elements and hiding them
  $("#subforms fieldset[disabled]").hide();
  $("#subforms fieldset[disabled] .form-element").attr('disabled','disabled');

  // choice tracker
  $('#choices input').click(function() {
    var $target = $($(this).attr("data-subform")),
        $oldElement = $("#subforms fieldset:not([disabled])");
    $oldElement.attr('disabled','disabled').hide();
    $oldElement.find(".form-element").attr('disabled','disabled');
    
    $target.removeAttr("disabled");
    $target.find(".form-element").removeAttr("disabled");
    $target.fadeIn();
  });
});

fieldset {
  border: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
        <div id="choices">
            <input type="radio" name="stype" id="opt1" data-subform="#subform1" value="subform1" checked=""/> <label for="opt1">Opt1</label>
            <input type="radio" name="stype" id="opt2" data-subform="#subform2" value="subform2"/> <label for="opt2">Opt2</label>
        </div>
        <div id="subforms">
          <fieldset id="subform1" >
            <input class="form-element" type="text" name="input1_1" placeholder="Input one"/>
            <input class="form-element" type="text" name="input1_2" placeholder="Input two"/>
          </fieldset>
          <fieldset id="subform2" disabled>
            <input class="form-element" type="text" name="input2_1" placeholder="Input one"/><br />
            <textarea class="form-element" name="input2_2" placeholder="Input two"></textarea><br />
            <input class="form-element" type="checkbox" name="input2_3" id="input2_3" /> <label for="input2_3">check this first</label>
          </fieldset>
        </div>
        <div id="#sbutton">
            <input type="submit" id="input3" value="Submit"/>
        </div>
    </form>

在ID选择器中使用无线电值

1 个答案:

多个项目的更新