jquery - 切换输入字段中的只读属性

Question

我已经创建了一个表单。这是fiddle

默认情况下，所有字段都处于只读状态。我在这里需要做的是

1. 单击编辑按钮时激活要编辑的文本字段，并且编辑按钮(名称和值)应变为保存按钮。

2. 编辑完成后，用户应单击保存按钮，并且应再次执行第一步，意味着将按钮更改回原始状态，即编辑 > 和文本字段为只读

最好寻找 jquery 解决方案。

提前致谢!!

Answer 1

获取名为Edit的所有元素并附加一个点击处理程序。变量 prev 是前一个输入元素，ro 是该元素的只读属性状态(true/false)。

然后我们将只读状态设置为! ro(不是 ro)，这只是意味着“将其设置为与当前相反的值(如果愿意，可以使用切换功能)”，并聚焦 prev 输入。

最后一行使用 this 定位当前单击的按钮，并根据 ro 变量的状态使用三元运算符更改其文本。

$('[name="Edit"]').on('click', function() {
    var prev = $(this).prev('input'),
        ro   = prev.prop('readonly');
    prev.prop('readonly', !ro).focus();
    $(this).val(ro ? 'Save' : 'Edit');
});

FIDDLE