Question

我正在尝试使用javascript来制作给定表单中的所有元素，只需单击按钮即可编辑readonly属性。

所以我只是设法让一个输入元素改变，因为我使用的是getElementById，但因为它是ID，所以这在HTML眼中是唯一的。

如何更改此设置，以便使用readonly定位所有输入元素？

看我的代码：

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用于阻止链接被跟踪。

Answer 2

试试这个

$("#edit").click(function() {
  $("input.form-control").removeAttr("readonly");
});

如果你使用jQuery

Answer 3

这是一个简单的JavaScript解决方案：

document.getElementById('edit').onclick = function(event) {
    event.preventDefault();
    var edits = [];
    edits = document.getElementsByClassName('editable');
    for(var i = 0; i<edits.length; i++){
        edits[i].readOnly = false;   
    }

};

<强>通知

你有id='editable'，我把它改成了类，因为你知道ID是独一无二的。

这是FIDDLE

使所有具有“form-control”类的表单元素可编辑

3 个答案: