javascript - 使类 "form-control"的所有表单元素可编辑

Question

我正在尝试使用 JavaScript 使给定表单中具有只读属性的所有元素都可以通过单击按钮进行编辑。

因此，因为我使用 getElementById 时只成功更改了一个输入元素，但由于它是 ID，因此在 HTML 眼中这是唯一的。

如何更改此设置，以便它以只读方式定位所有输入元素？

查看我的代码:

HTML:

<a href="" id="edit">Edit</a>

<input class="form-control" type="text" id="editable" name="" value="someValue" readonly> 
<input class="form-control" type="text" id="editable" name="" value="someValue2" readonly>

JAVASCRIPT:

document.getElementById('edit').onclick = function() {
    document.getElementById('editable').readOnly = false;
};

Answer 1

看看您如何接受可以使用的 jQuery 解决方案:

$('#edit').click(function (e) {
    e.preventDefault();
    $('.form-control').removeAttr('readonly')
})

<强> jsFiddle example

请注意，由于 ID 必须是唯一的，因此我删除了它们并使用该类来选择元素。 preventDefault 用于阻止链接被跟踪。