Question

我有多个输入类型=＆＃34;文本＆＃34;，两个输入类型=＆＃34;密码＆＃34;类=＆＃34;重要＆＃34;和一个复选框。当所有具有类重要性的输入被归档并且复选框被选中时，应该启用该按钮，否则禁用。我有这个脚本，但是当我在最后一个输入中输入文本时它会启用按钮。有人可以帮忙吗？

js

$(document).ready(function () {
    $(".important").on('keyup blur change', function () {
        $(".important").each(function () {
            if ($(this).val().trim() == "") {
                $('#form-right input[type="submit"]').addClass('inactive');
            } else {
                $('#form-right input[type="submit"]').removeClass('inactive');
            }
        });
    });
});

this is html:

<form>
    <fieldset>
        <ul>
            <li>
                <label class="mandatory">Naziv agencije</label>
                <input class="important" type="text" name="naziv_agencije" id="register_agency">
            </li>
            <li>
                <label class="mandatory">Adresa</label>
                <input class="important" type="text" name="adresa" id="register_address">
            </li>
            <li>
                <label class="mandatory">Telefon 1</label>
                <input class="important" type="text" name="telefon_1" id="register_phone">
            </li>
            <li>
                <label>Telefon 2</label>
                <input type="text" name="telefon_2" id="register_phone2">
            </li>
            <li>
                <label>Fax</label>
                <input type="text" name="fax" id="register_fax">
            </li>
            <li>
                <label class="mandatory">E-mail</label>
                <input class="important" type="text" name="email" id="register_email">
            </li>
            <li>
                <label>Web adresa</label>
                <input type="text" name="web_adresa" id="register_web">
            </li>
            <li>
                <label class="mandatory">Korisničko ime</label>
                <input class="important" type="text" name="korisnicko_ime" id="register_user">
            </li>
            <li>
                <label class="mandatory">Lozinka</label>
                <input class="important" type="password" name="lozinka" id="register_pass">
            </li>
            <li>
                <label class="mandatory">Potvrdi lozinku</label>
                <input class="important" type="password" name="pot_lozinku" id="register_passr">
            </li>
            <li>
                <label>Logo</label>
                <input type="hidden" name="max_file_size">
                <input type="file" name="logo" id="register_browse">
                <label class="browse-button" id="register_browse">Izaberi logo</label>
                <label class="file-label" id="register_browse">Logo još nije izabran</label>
            </li>
            <li>
                <div class="checkset">
                    <div class="custom-true">
                        <input type="checkbox" name="pravila" id="register_terms">
                        <label>Da,slažem se sa <a href="html and css.pdf">previlima i uslovima korišćenja</a>

                        </label>
                    </div>
                </div>
            </li>
            <li>
                <input type="submit" name="register" value="registruj se" disabled="disabled" class="inactive">
            </li>
            <li>
                <p class="catalog">Cenovnik usluga iternet sajta <a href="/" title="Last Minute Ponude">Last Minute Ponude</a>
pogledajte <a href="/">ovde</a>
.</p>
            </li>
        </ul>
    </fieldset>
</form>

Answer 1

此：

$(".important").each(function(){
    //...
});

将执行它为每个元素包含的逻辑。这基本上转化为：

如果第一个元素有值，请启用按钮
如果第二个元素有值，请启用按钮
等

因此，只要最后一个（也是最后一个）元素具有值，该按钮将被启用。对任何前一个元素的检查会立即被下一个元素覆盖。

逻辑应该：

如果任何元素没有值，请禁用按钮

一个简单的循环可以实现：

var elements = $(".important");
for (var i = 0; i < elements.length; i++) {
    if($(elements[i]).val().trim() == "") {
        $('#form-right input[type="submit"]').addClass('inactive');
        return;
    }
}
$('#form-right input[type="submit"]').removeClass('inactive');

这里的想法是遍历元素并寻找任何空的元素。一旦找到空的，请取消激活该按钮并从该功能返回。（因为我们不需要检查其余的元素。）如果没有找到空的并且循环完成，则启用该按钮。

Answer 2

<强> FIDDLE

添加了提交按钮的ID。

使用复选框检查输入是否为空如果完成，请勾选复选框，如果选中，则激活按钮。

$（＆＃34; #register_terms＆＃34;）。on（＆＃39; change＆＃39;，function（）{

if ($(this).is(":checked")) {
    $(".important").each(function () {
        if ($(this).val().trim() == "") {
            $('#qwe').prop('disabled', true);
        } else {
            $('#qwe').prop('disabled', false);
        }
    });
} else {
    $('#qwe').prop('disabled', true);
}

}）;

<强> UPDATED FIDDLE

NEW FIDDLE

根据文本输入禁用/启用按钮

2 个答案: