링크를 클릭 할 때 대상 div 내의 입력을 'required'로 설정합니다. jquery

이것은 지금까지 얻은 것입니다. 링크 (/ w 라디오)를 클릭 할 때 입력 (및 선택)을 '필수'로 설정하려고합니다. 여기에 jsfiddle에 대한 링크는 다음과 같습니다 http://jsfiddle.net/swdmedia/ZR3A7/1/링크를 클릭 할 때 대상 div 내의 입력을 'required'로 설정합니다. jquery

$(".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; 

});

출처

2014-01-15 geepers

을 그리고 문제가 무엇 : 아래

$(".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입니까? –

라디오 버튼이나 링크를 클릭 한 시점을 기준으로할까요? – j08691

바이올린에는 ''이 (가) 없습니다. iteration 요소를 참조하지 않는다면 왜'.each()'에서 그렇게하고 있습니까? – Barmar

는 그것을 value=""을주고, 선택 값을 확인하려면 (당신이 "--Please 선택해"보여 곳). 추가를 선택하여 class="required"을 선택하십시오.

크레딧 : Validate select box

또한, 다른 라디오 버튼을 체크하면, 다른 탭의 필수 속성을 제거해야합니다.

EDIT : 클릭 이벤트는 버튼이나 링크를 클릭하면 트리거되지만 버튼을 클릭하면 클릭 상태가 유지되지 않습니다. 따라서 셀렉터를 $(".persnl>a")으로 변경해야합니다 (단, 링크를 클릭하면 라디오 버튼을 변경하는 것이 이상해 보인다고 생각하므로 변경할 수 있습니다).

출처

2014-01-15 22:32:37

라디오는 보조 항목이며 표시되지 않습니다. 탭 선택에 따라 양식을 사용하여 '개인 설정'값을 보내면됩니다. – geepers

그 외에도 귀하의 질문에 답변이 되었습니까? (선택 항목을 필수로 설정 하시겠습니까?) –

아닙니다. html 부분은 쉽지만 한 링크를 클릭하면 이미 표시된 것으로 표시된 입력/선택 항목이 지워지고 ('필수'가 제거됨) 클릭 된 링크의 해당 div가 ' 필수 "동적. – geepers

이것은 내가 결국 생각해 냈습니다. 특정 페이지의 별도 컨테이너에 여러 탭/div가 있으므로 여러 단계가 진행됩니다. 이 솔루션은 상점에서 모노그램 항목을 판매하는 Shopify 계정 용이므로이를 수행하는 자바 스크립트에 의존해야합니다.

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

출처

2014-01-17 20:23:21 geepers

링크를 클릭 할 때 대상 div 내의 입력을 'required'로 설정합니다. jquery

답변

관련 문제