使用 JavaScript 禁用/启用“保存按钮”

Question

我已经将“禁用”属性设置为我的保存按钮，我的目标是在用户填写表单中的所有输入字段时启用它。

现在它有效，因为我在最后一个输入字段中设置了onkeyup="checkForm(this)" ，但这不是解决我的问题的聪明方法。

这是我表单中的 html 代码：

div class="page" id="create__book__formular">

        <div class="page__formular">

            <h3 id="formualer__name">Formular</h3>

            <label>Name:
                <input type="text" placeholder="Name" id="title" >
                </label>
            <label>Autor:
                <input type="text" placeholder="Autor" id="autor">
            </label>
            <label>ISBN:
                <input type="text" placeholder="ISBN" id="isbn">
            </label>
            <label>Anazhl:
                <input type="text" placeholder="Anazhl" id="number">
            </label>
            <label>Verlag:
                <input type="text" onkeyup="checkForm(this)" placeholder="Verlag" id="publishing">
            </label>

            <button type="button" class="btn btn-success create__book__formular" id="save--button" disabled="disabled">
                    save
            </button>
            <button type=" button " class="btn btn-light create__book__formular" id="back--button">
                back
            </button>
        </div>

    </div>

这是我的 JavaScript 代码：

function checkForm(create__book__formular) {
var bt = document.getElementById('save--button');
if (create__book__formular.value != '') {
    bt.disabled = false;
} else {
    bt.disabled = true;
}

}

谢谢你的帮助！

Answer 1

我发现以下帖子提出了类似的问题。

他们提供以下代码：

(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
    });
})()

如果至少有 1 个字段为空，则此代码应禁用提交按钮。

Answer 2

谢谢！ 我在没有 jQuery 的情况下弄清楚了，这是我的解决方案。

//9 Disable button in the form
const inputName = document.getElementById('title');
const inputAutor = document.getElementById('autor');
const inputIsbn = document.getElementById('isbn');
const inputNumber = document.getElementById('number');
const inputPublishing = document.getElementById('publishing');

const saveBtn = document.getElementById('save--button');

const form = document.getElementById('form');


form.addEventListener('input', showButton);

function showButton() {
    if (inputName.value.length > 0 && inputAutor.value.length > 0 &&
        inputIsbn.value.length > 0 && inputNumber.value.length > 0 &&
        inputPublishing.value.length > 0) {
        saveBtn.removeAttribute('disabled');
    } else {
        saveBtn.setAttribute('disabled', 'disabled');

    }
}