根據單選按鈕選擇更改字段的所需狀態

Question

這種情況下：我有2個單選按鈕，通過javascript選擇時顯示/隱藏2個其他代碼塊。顯示/隱藏的html包含其他需要的字段。所以我只是通過顯示隱藏它們：根據單選按鈕選擇無。無論如何，在這種情況下，我的表單不能被解僱，因爲我應該根據單選按鈕的選項填寫反正隱藏的必填字段。所以我需要的是在無線電選擇的反向刪除/添加「所需」狀態。

我該怎麼做？

<form action="./assets/php/sendmail.php" class="form common_font" method="post"> 
    <div class="choosecontact"> 
     <input type="radio" id="radio01" name="radio" value="telefonopref" required /> 
     <label for="radio01"><span></span>Contattatemi per <b>telefono</b></label> 
     <br> 
     <input type="radio" id="radio02" name="radio" value="emailpref" /> 
     <label for="radio02"><span></span>Contattatemi per <b>e-mail</b></label> 
    </div> 

    <div id="telefonopref"> 
     <label class="selectcustom"> 
      <select class="dropdown" required> 
       <option value="saab">Chiamatemi tra 8.30 - 12.30</option> 
       <option value="vw">Chiamatemi tra 14.30 - 18.30</option> 
      </select> 
     </label> 

     <div class="field inline-block name"> 
      <label for="input_text" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label> 
      <input id="input_text" name="TEXT" class="field-input" type="text" required> 
     </div> 
    </div> 

    <div id="emailpref" class="field inline-block email"> 
     <label for="input_email" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label> 
     <input id="input_email" name="EMAIL" class="field-input" type="EMAIL" required> 
    </div> 


    <div id="otherformpart"> 
     <div class="field msg"> 
      <label for="input_msg" class="field-label common_font regular medium_font_size form_color">Vuoi aggiungere qualcosa? Scrivilo qui.</label> 
      <input id="input_msg" name="TEXT" class="field-input" type="text"> 
     </div> 

     <div class="inline-block row"> 
      <div class="col-xs-2"> 
       <input id="input_privacycheck" name="PRIVACYCHECK" class="privacycheck" type="checkbox" required> 
      </div> 
      <div class="col-xs-10"> 
       <label for="input_checkprivacy" class="privacyconsent">Acconsento al trattamento dei dati personali come indicato nella Privacy Policy ai fini di questo servizio.</label> 
      </div> 
     </div> 

     <button type="submit" class="send-btn center common_element_color common_font medium body_font_size white"><span class="fa fa-chevron-right"></span> Invia richiesta</button> 
    </div> 
</form> 

這是我的JavaScript來顯示HTML的/隱藏部分根據readio按鈕選擇：

$('input[type=radio][name=radio]').change(function() { 
    $('#emailpref').css("display","none"); 
    $('#telefonopref').css("display","none"); 
    console.log($(this).val()); 
    var fieldToShow = $(this).val(); 
    $("#" + fieldToShow).css("display","block"); 
}); 

$('input[type=radio][name=radio]').change(function() { 
    $('#otherformpart').css("display","none"); 
    console.log($(this).val()); 
    var fieldToShow = $(this).val(); 
    $("#otherformpart").css("display","block"); 
}); 

Answer 1

您可以刪除與removeAttr功能必需的屬性。但是爲了安全起見，最好還要取消道具。

請嘗試以下。

$('input[type=radio][name=radio]').change(function() { 
 
    $('#emailpref').css("display","none").removeAttr('required').prop('required', false); 
 

 
    $('#telefonopref').css("display","none"); 
 
    console.log($(this).val()); 
 
    var fieldToShow = $(this).val(); 
 
    $("#" + fieldToShow).css("display","block").css("display","block").attr('required', 'true').prop('required', true); 
 
}); 
 

 
$('input[type=radio][name=radio]').change(function() { 
 
    
 
    $('#otherformpart').css("display","none").removeAttr('required').prop('required', false); 
 
    console.log($(this).val()); 
 
    var fieldToShow = $(this).val(); 
 
    $("#otherformpart").css("display","block").attr('required', 'true').prop('required', true); 
 
});

Answer 2

我已經解決了自己這個樣子。只需稍微編輯一下HTML代碼，然後再添加一個新腳本。

HTML代碼：

<form action="./assets/php/sendmail.php" class="form common_font" method="post"> 
    <div class="choosecontact"> 
     <input type="radio" id="radiotel" name="radio" value="telefonopref" required /> 
     <label for="radiotel"><span></span>Contattatemi per <b>telefono</b></label> 
     <br> 
     <input type="radio" id="radioemail" name="radio" value="emailpref" /> 
     <label for="radioemail"><span></span>Contattatemi per <b>e-mail</b></label> 
    </div> 

    <div id="telefonopref"> 
     <label class="selectcustom"> 
      <select id="orariotel" class="dropdown" required> 
       <option value="saab">Chiamatemi tra 8.30 - 12.30</option> 
       <option value="vw">Chiamatemi tra 14.30 - 18.30</option> 
      </select> 
     </label> 

     <div class="field inline-block name"> 
      <label for="input_tel" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label> 
      <input id="input_tel" name="TEXT" class="field-input" type="text"> 
     </div> 
    </div> 

    <div id="emailpref" class="field inline-block email"> 
     <label for="input_email" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label> 
     <input id="input_email" name="EMAIL" class="field-input" type="EMAIL" required> 
    </div> 


    <div id="otherformpart"> 
     <div class="field msg"> 
      <label for="input_msg" class="field-label common_font regular medium_font_size form_color">Vuoi aggiungere qualcosa? Scrivilo qui.</label> 
      <input id="input_msg" name="TEXT" class="field-input" type="text"> 
     </div> 

     <div class="inline-block row"> 
      <div class="col-xs-2"> 
       <input id="input_privacycheck" name="PRIVACYCHECK" class="privacycheck" type="checkbox" required> 
      </div> 
      <div class="col-xs-10"> 
       <label for="input_checkprivacy" class="privacyconsent">Acconsento al trattamento dei dati personali come indicato nella Privacy Policy ai fini di questo servizio.</label> 
      </div> 
     </div> 

     <button type="submit" class="send-btn center common_element_color common_font medium body_font_size white"><span class="fa fa-chevron-right"></span> Invia richiesta</button> 
    </div> 
</form> 

JS代碼：

/*--------------------------- 
    required/not required according to radio selection 
----------------------------*/ 
$('#radiotel').change(function() { 
    if(this.checked) { 
     $('#input_email').prop('required', false); 
     $('#input_tel').prop('required', true); 
     $('#orariotel').prop('required', true); 
     } else { 
     $('#input_email').prop('required', true); 
     $('#input_tel').prop('required', false); 
     $('#orariotel').prop('required', false); 
    } 
}); 

$('#radioemail').change(function() { 
    if(this.checked) { 
     $('#input_email').prop('required', true); 
     $('#input_tel').prop('required', false); 
     $('#orariotel').prop('required', false); 
     } else { 
     $('#input_email').prop('required', false); 
     $('#input_tel').prop('required', true); 
     $('#orariotel').prop('required', true); 
    } 
});