Javascript 默认情况下禁用表单输入。单击<；a>；。禁用对不同对象的onClick<；a>；

基本上，我希望在单击“编辑配置文件”按钮之前禁用所有表单输入，然后单击“保存更改”按钮后，重新应用禁用属性

我在这个网站上尝试了很多解决方案，但没有成功。任何帮助都将不胜感激，即使只是指引我正确的方向

下面是使用引导的代码，其中包含Django（显然未显示）。提前谢谢

<div class="main">
    <div class="container">
        <section class="hgroup">
            <h1>My Profile</h1>
            <h2>View and edit your profile.</h2>
            <ul class="breadcrumb pull-right">
                <li><a href="../dashboard">Dashboard</a> </li>
                <li class="active">Profile</li>
            </ul>
        </section>
        <section>
            <div class="row">
                <div class="contact_form col-sm-12 col-md-12">
                    <form name="contact_form" id="contact_form" method="post">
                        <div class="row">
                            <div class="col-sm-4 col-md-4">
                                <label>First Name</label>
                                <input name="first_name" id="name" class="form-control" type="text" value="">
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <label>Middle Name</label>
                                <input name="middle_name" id="email" class="form-control" type="text" value="">
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <label>Last Name</label>
                                <input name="last_name" id="email" class="form-control" type="text" value="">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <br/>
                            <a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
                            <a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
                            <!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>

我的个人资料
查看和编辑您的个人资料。


配置文件

名字
中名
姓


编辑配置文件
保存更改

您还有两个元素的id

submit\u btn

，id应该是唯一的

我会将它们更改为不同的，然后尝试：

$("#edit_btn").on('click', function() {
    $("input[type='text']").removeAttr('disabled');
});

然后重新禁用：

$("#submit_btn").on('click', function() {
    $("input[type='text']").attr('disabled', 'disabled');
});

如果您不想禁用页面上的更多输入，您可能希望更改

输入[type='text']

选择器

---

可能会更改

元素以包含

js disable

类，然后将

$（“.js disable”）

选择器作为目标，而不是

输入[type='text']

添加一些选择器以链接-

<a href="#" id="edit_profile" class="btn btn-primary">Edit Profile</a>
<a href="#" id="save_button" class="btn btn-primary">Save Changes</a>

更改输入字段的属性-

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

$('#edit_profile').on('click', function(e) {
    e.preventDefault();
    $('input').attr('disabled', false);
});

$('#save_button').on('click', function(e) {
    e.preventDefault();
    $('input').attr('disabled', true);
});

别忘了包括jquery。和

e.preventDefault（）

用于防止

a

s的默认操作

---

我会使用jQuery。这里有一个例子

html:

CSS:

---

这里有一个小问题：

您看到了如何使用jQuery添加单击处理程序，或者如何使用jQuery禁用/启用id元素了吗类似的问题可能会有所帮助

<form>
    <p>Edit the form</p>
    <input type="text" placeholder="one" disabled>
    <input type="text" placeholder="two" disabled>
    <input type="text" placeholder="three" disabled>
    <div id="saveForm">Save Form</div>
    <div id="editForm">Edit Form</div>
</form>

$("#editForm").click(function(){
    $("p").show(0);
    $("#saveForm").show(0);
    $("form input").prop('disabled', false);
    $(this).hide(0);
});
$("#saveForm").click(function(){
    $("p").hide(0);
    $("#editForm").show(0);
    $("form input").prop('disabled', true);
    $(this).hide(0);
});

div,input{
    padding: 10px;
    display: block;
    margin: 10px;
    border-radius: 5px;
    border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}