Question

Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.

I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.

Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.

<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>

Answer 1

添加一些选择器链接 -

<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的默认操作。

Working Demo

Answer 2

您还有两个ID为submit_btn的元素，id＆＃39; s应该是唯一的。

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

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

然后重新禁用：

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

如果您不想要禁用的页面上有更多输入，您可能希望更改input[type='text']选择器。

也许更改您的<input>元素以包含js-disable类，然后定位$(".js-disable")选择器而不是input[type='text']

Answer 3

我会使用jQuery。这是一个例子。

HTML：

<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>

jQuery的：

$("#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);
});

CSS：

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;}

这是一个小提琴：http://jsfiddle.net/92ng2hs0/2/

默认情况下禁用表单输入。点击<a>. Disable onClick of different </a> <a>

3 个答案: