Question

我正在使用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);
    }
});

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

Answer 1

这应该有效：

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

Answer 2

尝试

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

Answer 3

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

jQuery Mobile textinput methods

Answer 4

好的，想通了。将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>

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

4 个答案: