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

Question

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

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

1. 为提交按钮添加了 ID。

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

   $("#register_terms").on('change', 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