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

【问题标题】：Disable/Enable "save-button" using JavaScript使用 JavaScript 禁用/启用“保存按钮”
【发布时间】：2020-02-19 10:37:32
【问题描述】：

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

现在它可以工作了，因为我在最后一个输入字段中设置了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;
}

}

感谢您的帮助！

【问题讨论】：

你可以使用onChange事件，因为它会在你离开输入框时触发一次函数
请注意，如果按钮被禁用，仍然可以提交表单，方法是在输入时按 enter。

标签： javascript html disable

【解决方案1】：

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

他们提供以下代码：

(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 个字段为空，则此代码应禁用提交按钮。

【讨论】：

【解决方案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');

    }
}

【讨论】：