Question

情况就是这样：我有两个单选按钮，在选中时通过javascript显示/隐藏另外两个代码块。显示/隐藏的html包含所需的其他字段。所以我只是通过display：none根据单选按钮选择隐藏它们。无论如何在这种情况下我的表单不能被触发，因为我应该根据单选按钮的选择填充必要的字段，无论如何这些字段都隐藏给用户。所以我需要的是在无线电选择的反向处移除/添加“必需”状态。

我怎么能这样做？

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

这是我根据readio按钮选择显示/隐藏部分HTML的JavaScript：

$('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函数删除所需的属性。但为了安全起见，最好不要支持道具。

尝试以下。

＆＃13;

$('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);
});

＆＃13;

Answer 2

我以这种方式解决了自己。只需稍微编辑一下HTML代码和一个新脚本。

HTML code：

<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);
    }
});

根据单选按钮选择更改字段的所需状态

2 个答案: