单击链接时，将目标 div 中的输入设置为“必需”答案

【问题标题】：set inputs within a targeted div to 'required' when a link is clicked jquery单击链接时，将目标 div 中的输入设置为“必需”
【发布时间】：2014-02-04 15:12:46
【问题描述】：

这是我到目前为止所得到的。尝试在单击链接（/w 无线电）时将输入（和选择）设置为“必需”。这是 jsfiddle 的链接：http://jsfiddle.net/swdmedia/ZR3A7/1/

$(".persnl").click(function(){

  var myTab = $(this).find("a").attr("href");
  // alert(myTab);

  $(this).find(':radio').prop('checked',true);
  // alert('clicked');  

  $(myTab).each(function() {
    $('input[type=text]').prop("required", true);
  });
  return false;

});

【问题讨论】：

有什么问题？
您希望这基于他们单击单选按钮或链接的时间吗？
您的小提琴中没有<input type="text"]>。如果不引用迭代元素，为什么要在 .each() 中这样做？
目前的问题是，我无法将所需的元素放置在所需的元素上（每个实例都有 2-3 个 div），希望它与被点击的链接相关联- 收音机将被隐藏（只需要它的值与表单一起传递）。
您应该更改元素的 disabled 属性，而不是动态更改 required 。通过这种方式，您可以使用其他 HTML5 验证，如模式或 type="email" 或保留一些可选控件。另请参阅：jsfiddle.net/trixta/K8EPm

标签： javascript jquery

【解决方案1】：

要验证选择的值，请给它一个value=""（您在其中显示“--请选择--”）。并添加到选择class="required"。

致谢：Validate select box

另外，当您选中其他单选按钮时，请记住删除其他选项卡的 required 属性。

编辑：如果您点击按钮或链接，您的点击事件就会触发，但是当您点击按钮时，它不会保持点击状态。因此，您应该将选择器更改为 $(".persnl>a")（但是，更改单击链接的单选按钮看起来很奇怪，因此您可能需要更改它）。

【讨论】：

收音机是次要项目，将不可见。我只需要根据选择的选项卡使用表单发送一个“个性化”值。
除此之外，您的问题得到了回答吗？（将选择设置为必需？）
不完全，不。 html 部分很简单，但是，当单击一个链接时，任何已标记为必需的输入/选择都将被清除（删除“必需”），然后单击的链接的相应 div 将标记为“需要'动态。
我现在只想解决动态添加“必需”的问题。排序完成后，我应该可以删除另一个。

【解决方案2】：

这就是我最终想到的。由于在任何给定页面上的单独容器中都有多组此选项卡/div，因此还有更多工作要做。解决方案适用于 Shopify 帐户，该商店出售带有字母组合的商品，因此需要依赖 javascript 来执行此操作。

$(".persnl").click(function(){

  var myTab = $(this).find("a").attr("href");
  // alert(myTab);

  var parId = $(".persnl").closest("div").attr("id");
  // alert(parId);

  $(this).find(':radio').prop('checked',true);
  // alert('clicked');

  $('input[type=text]').val('');
  $('option').prop("selected", false);
  $('input[type=text], select').prop("required", false);
  $(myTab).find('input[type=text], select').prop("required", true);

  return false;

});

下面是它的 html：

<form action="">

<div>
  <h3>Select your personalization type</h3>
</div>

<div id="tabs" class="ui-tabs">
  <ul class="ui-tabs-nav clearfix">
    <li class="persnl"><a href="#tabs-1" class="button">No Personalization</a><input type="radio" name="properties[Personalization]" class="hidden" value="No Personalization" checked /></li>
    <li class="persnl"><a href="#tabs-2" class="button">Single Initial</a><input type="radio" name="properties[Personalization]" class="hidden" value="Single Initial"/></li> 
    <li class="persnl"><a href="#tabs-3" class="button">3 Initials</a><input type="radio" name="properties[Personalization]" class="hidden" value="3 Initials"/></li>
    <li class="persnl"><a href="#tabs-4" class="button">Text</a><input type="radio" name="properties[Personalization]" class="hidden" value="Text"/></li>
  </ul>

  <hr/>

  <div id="tabs-1" class="ui-tabs-panel">
    <p>No personalization options.</p>
  </div><!--/.tabs-1-->

  <div id="tabs-2" class="ui-tabs-panel">
    <h4>Single Initial Options</h4>
    <div class="clearfix">
      <label for="sFonts" class="label">Font:</label> 
      <select id="sFonts" name="properties[Single Font]" class="inline">
        <option value="">--Please Select--</option>
        <option value="Blackboard" selected>Blackboard</option>
        <option value="Classic">Classic</option>
      </select>
      <div><a href="#pop-fonts" class="fancybox">&raquo; View Fonts</a></div>
    </div>
    <div class="clearfix">
  <label for="single" class="label">Single Letter:</label> <input type="text" id="single" class="inline uppercase single" name="properties[Single]" maxlength="1" size="1" />
    </div>  
    <div class="clearfix">
      <label for="sThread" class="label">Thread Color:</label>
      <select id="sThread" name="properties[Single Thread]" class="inline">
        <option value="">--Please Select--</option>  
        <option value="Aqua Blue">Aqua Blue</option>
        <option value="Black">Black</option>   
        <option value="Brown">Brown</option>  
      </select>
      <div><a href="#pop-thread" class="fancybox">&raquo; View Thread Colors</a></div>
    </div>
 </div><!--/#tabs-2-->
 <div id="tabs-3" class="ui-tabs-panel">
   <h4>3 Initials Options</h4>
   <div class="clearfix">
     <label for="tFonts" class="label">Font:</label> 
     <select id="tFonts" name="properties[Initials Font]" class="inline">
       <option value="">--Please Select--</option>
       <option value="Blackboard">Blackboard</option>
       <option value="Circle">Circle</option>
       <option value="Classic">Classic</option>
      </select>
      <div><a href="#pop-fonts" class="fancybox">&raquo; View Fonts</a></div>
    </div>
    <div class="clearfix">
      <label for="monogram1" class="label">First Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram1" name="properties[Initials1]" maxlength="1" size="1" /><br/>
      <label for="monogram2" class="label">Midle Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram2" name="properties[Initials2]" maxlength="1" size="1" /><br/>
      <label for="monogram3" class="label">Last Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram3" name="properties[Initials3]" maxlength="1" size="1" />
    </div>
    <div class="clearfix">
      <label for="monoFormat" class="label">Monogram Format:</label>
      <select id="monoFormat" name="properties[Monogram Format]" class="inline">
    <option value="">--Please Select--</option>
        <option value="Female">Female (First, Last, Middle) Order</option>
        <option value="Male">Male (First, Middle, Last) Order</option>
      </select>
    </div>
    <div class="clearfix">
      <label for="monoThread" class="label">Thread Color:</label>
      <select id="monoThread" name="properties[Initials Thread]" class="inline">
        <option value="">--Please Select--</option>
        <option value="Aqua Blue">Aqua Blue</option>
        <option value="Black">Black</option>
        <option value="Brown">Brown</option>
      </select>
      <div><a href="#pop-thread" class="fancybox">&raquo; View Thread Colors</a></div>
    </div>
    </div><!--/.tabs-3-->
    <div id="tabs-4" class="ui-tabs-panel">
      <h4>Text Options</h4>
      <div class="clearfix">
        <label for="textFonts" class="label">Font:</label> 
        <select id="textFonts" name="properties[Text Font]" class="inline">
          <option value="">--Please Select--</option>
          <option value="Blackboard">Blackboard</option>
          <option value="Classic">Classic</option>
          <option value="Cottilion">Cottilion</option>
        </select>
        <div><a href="#pop-fonts" class="fancybox">&raquo; View Fonts</a></div>
      </div>
      <div class="clearfix">
    <label for="word" class="label">Text:</label> <input type="text" id="word" name="properties[Word]" maxlength="18" size="18" class="inline" /> <em>(18 character limit)</em>
      </div>
      <div class="clearfix">
        <label for="textThread" class="label">Thread Color:</label>
        <select id="textThread" name="properties[Text Thread]" class="inline">
          <option value="">--Please Select--</option>
          <option value="Aqua Blue">Aqua Blue</option>
          <option value="Black">Black</option>
          <option value="Brown">Brown</option>
          <option value="Yellow">Yellow</option>
        </select>
        <div><a href="#pop-thread" class="fancybox">&raquo; View Thread Colors</a></div>
      </div>
    </div><!--/.tabs-4-->
</div><!--/#tabs-->

【讨论】：