下拉菜单为空时禁用按钮

时间:2020-08-25 12:08:03

标签: javascript html jquery

我有一个找不到解决方案的问题。

当未选择有效的下拉选项时,我需要禁用“提交”按钮。

开始时效果很好。如果第二个下拉菜单设置为“省”,则提交按钮将被禁用。一旦我更改了第一个下拉菜单并自动更改了第二个下拉菜单的值,该按钮仍被禁用,但是一旦我编辑了文本输入,我便启用了该按钮,因为它会使用keyup功能进行更新。

首先: First step

第二: Second step

当将第一个下拉菜单设置为默认值“ Regione”时,就会出现主要问题。第二个下拉列表变为空,而不是默认值“ Provincia”。可以,但是即使我更新了文字输入,按钮也不会被禁用。

我想在更改下拉列表以保持此代码后立即禁用/启用按钮。

第三: Third step

代码中的下拉列表为[name =“ nascita_provincia”],其他为文本输入。

我还有其他下拉菜单,但是一旦找到一个解决方案,便可以对所有这些实现。还要避免更改html / php代码。

我的jQuery代码是这样的:

$(document).ready(function (){
    validate();
    $('input[name="first_name"], input[name="last_name"], input[name="nascita_citta"], input[name="residenza_citta"], input[name="residenza_indirizzo"], input[name="domicilio_citta"], input[name="domicilio_indirizzo"], input[name="cellulare"], input[name="phone"], input[name="occupazione"], input[name="cfiscale"], input[name="banca_iban"], input[name="banca_istituto"], input[name="banca_intestatario"], input[name="banca_abi"], input[name="banca_cab"], input[name="banca_cin"], input[name="banca_agenzia"], input[name="banca_cc"], [name="nascita_provincia"]').change(validate);
    $('input[name="first_name"], input[name="last_name"], input[name="nascita_citta"], input[name="residenza_citta"], input[name="residenza_indirizzo"], input[name="domicilio_citta"], input[name="domicilio_indirizzo"], input[name="cellulare"], input[name="phone"], input[name="occupazione"], input[name="cfiscale"], input[name="banca_iban"], input[name="banca_istituto"], input[name="banca_intestatario"], input[name="banca_abi"], input[name="banca_cab"], input[name="banca_cin"], input[name="banca_agenzia"], input[name="banca_cc"]').keyup(function() {validate();});
});

function validate(){
    if ($('input[name="first_name"]').val().length   >   0   &&
        $('input[name="last_name"]').val().length  >   0   &&
        $('input[name="nascita_citta"]').val().length  >   0   &&
        $('input[name="residenza_citta"]').val().length  >   0   &&
        $('input[name="residenza_indirizzo"]').val().length  >   0   &&
        $('input[name="domicilio_citta"]').val().length  >   0   &&
        $('input[name="domicilio_indirizzo"]').val().length  >   0   &&
        $('input[name="cellulare"]').val().length  >   0   &&
        $('input[name="phone"]').val().length  >   0   &&
        $('input[name="occupazione"]').val().length  >   0   &&
        $('input[name="cfiscale"]').val().length  >   0   &&
        $('input[name="banca_iban"]').val().length  >   0   &&
        $('input[name="banca_istituto"]').val().length  >   0   &&
        $('input[name="banca_intestatario"]').val().length  >   0   &&
        $('input[name="banca_abi"]').val().length  >   0   &&
        $('input[name="banca_cab"]').val().length  >   0   &&
        $('input[name="banca_cin"]').val().length  >   0   &&
        $('input[name="banca_agenzia"]').val().length  >   0   &&
        $('input[name="banca_cc"]').val().length  >   0   &&
        $('[name="nascita_provincia"]').val()  !=   0   &&
        $('[name="nascita_provincia"]').val() != 'Provincia'
    ) {
        jQuery("#update_details").prop('disabled', false);
    }
    else {
        jQuery("#update_details").prop('disabled', true);
    }
}

这也是感兴趣字段的html代码:

                <div class="form-group">
                    <label>
                        <?= trans('luogo_nascita'); ?>
                    </label>
                  <div class="form-row">
                    <div class="col">
                        <select id="birthday_sel" name="nascita_regione" class="form-control" onchange="configureDropDownLists1(this,document.getElementById('county_birth'))">
                            <?php
                                $birth_region = "";
                                if ($currentUser->nascita_regione == "") {
                                    $birth_region = trans('region');
                                } else {
                                    $birth_region = ($currentUser->nascita_regione);
                                }
                            ?>
                            <option value="<?php echo($birth_region); ?>" selected><?php echo($birth_region); ?></option>
                            <option disabled="true">--------</option>
                            <option value="Abruzzo">Abruzzo</option>
                            <option value="Basilicata">Basilicata</option>
                            <option value="Calabria">Calabria</option>
                            <option value="Campania">Campania</option>
                            <option value="Emilia-Romagna">Emilia-Romagna</option>
                            <option value="Friuli-Venezia Giulia">Friuli-Venezia Giulia</option>
                            <option value="Lazio">Lazio</option>
                            <option value="Liguria">Liguria</option>
                            <option value="Lombardia">Lombardia</option>
                            <option value="Marche">Marche</option>
                            <option value="Molise">Molise</option>
                            <option value="Piemonte">Piemonte</option>
                            <option value="Puglia">Puglia</option>
                            <option value="Sardegna">Sardegna</option>
                            <option value="Sicilia">Sicilia</option>
                            <option value="Trentino-Alto Adige/Südtirol">Trentino-Alto Adige/Südtirol</option>
                            <option value="Toscana">Toscana</option>
                            <option value="Umbria">Umbria</option>
                            <option value="Valle d'Aosta/Vallée d'Aoste">Valle d'Aosta/Vallée d'Aoste</option>
                            <option value="Veneto">Veneto</option>
                        </select>
                    </div>
                    <div class="col">
                        <select id="county_birth" name="nascita_provincia" class="form-control">
                            <?php
                                $birth_county = "";
                                if ($currentUser->nascita_provincia == "") {
                                    $birth_county = trans('county');
                                } else {
                                    $birth_county = ($currentUser->nascita_provincia);
                                }
                            ?>
                            <option value="<?php echo($birth_county); ?>" selected><?php echo($birth_county); ?></option>
                        </select>
                    </div>
                    <div class="col">
                      <input type="text" name="nascita_citta" class="form-control" value="<?= e($currentUser->nascita_citta); ?>" placeholder="<?= trans('city'); ?>">
                    </div>
                  </div>
              </div>

第二个下拉列表的填充取决于第一个下拉列表的选择。有一个单独的js文件可用于执行此操作。

0 个答案:

没有答案