默认情况下禁用表单输入.在点击< >时启用它们.禁用不同<a>的onClick

Disable form inputs by default. Enable them onClick of <a>. Disable onClick of different <a>

本文关键字：onClick 启用 情况下 输入 表单 默认      更新时间：2023-09-26

基本上我想有所有的表单输入禁用，直到"编辑配置文件"按钮被点击，然后一旦"保存更改"按钮被点击，有禁用属性重新应用。

我从这个网站尝试了一堆解决方案，没有运气。任何帮助都将是感激的，即使它只是引导我到正确的方向。

下面是代码，它使用bootstrap并包含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>

添加一些选择器到link - 

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

演示工作

您也有两个具有id submit_btn的元素，id应该是唯一的。

我会把它们改变成不同的，然后尝试:

$("#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']

我会使用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/

相关文章：