如何更改表单中的所有元素以仅使用 javascript 禁用

How can I change all the elements in a form to be disabled using only javascript?

本文关键字：禁用 javascript 元素 表单 何更改      更新时间：2023-09-26

我有这个 HTML：

     <div id="account-form">
        <form action="/Account/Login" id="login-form" class="form" method="post">
            <div id="input-fields">
                <div>
                    <input class="medium-margin" id="UserName" name="UserName">
                </div>
                <div>
                    <input class="medium-margin" id="Password" name="Password">
                </div>
            </div>
            <button class="medium glossy" id="login" type="submit">Login</button>
            <button class="medium glossy" id="register" type="button" onclick="location.href='/Account/Register'">Register</button>
        </form>
    </div>

我正在使用以下内容来禁用按钮：

   document.getElementById("login").disabled = true;
   document.getElementById("register").disabled = true;

我想要的是禁用<input>和<button>。有没有办法我可以在不通过 Id 获取每个元素的情况下做到这一点。

试试这个：

$(".medium-margin").attr('disabled','disabled');

你可以按类名来做

您可以使用带有返回集合 HTML 元素的 getElementsByTagName 来获取元素

var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
    inputs[i].disabled  = true;
}

演示

获取如下元素： document.getElementsByTagName('input') 和 document.getElementsByTagName('button') 

<div id="account-form">
        <form action="/Account/Login" id="login-form" class="form" method="post">
            <div id="input-fields">
                <div>
                    <input class="medium-margin" id="UserName" name="UserName">
                </div>
                <div>
                    <input class="medium-margin" id="Password" name="Password">
                </div>
            </div>
            <button class="medium glossy" id="login" type="submit" disabled>Login</button>
            <button class="medium glossy" id="register" type="button" onclick="location.href='/Account/Register'" disabled>Register</button>
        </form>
    </div>

我认为上面的代码对您有用。试试吧。

使用 Javascript：

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
     inputs[i].disabled = true;
}

如果要禁用多个按钮，则可以使用相同的方法。

使用 jQuery：

 $('input').each(function() {
                $(this).attr({
                    'disabled': 'disabled'
                });
        });

试试这个：- 

$('input').attr('disabled',true);

或 

$('button').attr('disabled',true);
相关文章：