使用jquery启用和禁用按钮上的表单

时间:2013-02-11 17:26:08

标签: jquery jquery-mobile

我正在使用jquery和jquery mobile,基本上我正在尝试创建一个编辑按钮。我有一个包含用户信息的表单,默认情况下都设置为禁用。我想在单击编辑按钮时启用表单,然后在单击保存按钮时禁用表单。这是表格:

<div data-role="fieldcontain">
            <label for="first_name">First Name:</label>
            <input type="text" name="first_name" id="first_name" value="" placeholder="First Name" disabled />
        </div>

        <div data-role="fieldcontain">
            <label for="last_name">Last Name:</label>
            <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name" disabled />
        </div>

        <div data-role="fieldcontain">
            <label for="user_name">User Name:</label>
            <input type="text" name="user_name" id="user_name" value="" placeholder="User Name" disabled />
        </div>

        <div data-role="fieldcontain">
            <label for="password">Password:</label>
            <input type="text" name="password" id="password" value="" placeholder="Password" disabled />
        </div>

        <div data-role="fieldcontain">
            <label for="email">Email Address:</label>
            <input type="text" name="email" id="email" value="" placeholder="Email Address" disabled="disabled" />
        </div>

以下是我的按钮:

 <button data-inline="true" id="edit">Edit</button>
 <button data-inline="true">Save</button>

这是我一直在玩的jquery:

$(document).ready(function(){
    $('#input:edit').click(function)(){
        $('input:email').attr("disabled", false);
    }
});

我注意到的一件事,可能是问题的一部分,即使我将文本输入的代码从禁用更改为启用,即使我刷新页面后它们也会保持禁用状态,而且我有返回我的主页,刷新,然后导航到用户信息页面以使其成为启用状态。因此,如果页面正确更新,我可能会尝试的一些事情是正确的。任何帮助表示赞赏。

4 个答案:

答案 0 :(得分:0)

这应该有效:

$(document).ready(function(){
    $('#input:edit').click(function)(){
        $('input:email').attr("disabled", "");
    }
});

答案 1 :(得分:0)

尝试

$(document).ready(function(){
$('#edit').click(function)(){
    $('#email').attr("disabled", false);
}
});

答案 2 :(得分:0)

您应该使用$('input:email').textinput('enable');

jQuery Mobile textinput methods

答案 3 :(得分:0)

好的,想通了。 将jquery代码更改为:

function edit() {
    alert("edit");
    $('#first_name').prop('disabled', false);
    $('#last_name').prop('disabled', false);
    $('#user_name').prop('disabled', false);
    $('#password').prop('disabled', false);
    $('#email').prop('disabled', false);
    location.reload();
}

和按钮代码:

 <button data-inline="true" id="edit" onclick="edit()">Edit</button>
 <button data-inline="true" id="save" onclick="save()">Save</button>