更改两个输入字段的属性

Question

我有一些问题，想使用jQuery为这些输入框添加属性：

<input id='timetable_start'>
<input id='timetable_finish'>

<script>
attributes = {
    "class": "reloj",
    "maxlength": "5",
    "pattern": "^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$",
    "size": "6",
    "type": "text"
};

$('#timetable_finish').attr(attributes);
$('#timetable_start').attr(attributes);
</script>

为什么只有一个被改变了？我错过了什么吗？非常感谢您的时间。
链接： http://jsbin.com/iqipan/4/edit

- chespinoza

---

当你说“为什么只有一个被改变了？”时，你是指只有一个属性被改变了，还是只有一个元素被改变了？ - Anthony Grist

Answer 1

因为在尝试设置第一个输入字段的属性时，代码会抛出错误：

未捕获的错误：无法更改类型属性。

从对象中删除type，一切都会正常。

---

一些浏览器（我猜是IE）不允许在创建后更改input元素的类型，所以如果您尝试这样做，jQuery会抛出异常。请参见使用jQuery更改输入字段的类型。

- Felix Kling

Answer 2

使用

$("#timetable_finish, #timetable_start").attr(attributes);

然而，您无法更改输入框的type属性。您需要创建一个新的输入框来替代它：

$("#timetable_finish").replaceWith($("<input>", attributes));

- Explosion Pills

Answer 3

这是因为属性type是只读的，而DOM属性type不是。您可以使用以下方法：

$('#timetable_finish').prop(attributes);
$('#timetable_start').prop(attributes);

成功地同时更改两个内容。

- techfoobar

---

哈，我不知道属性可以被更改... 不过，这并不意味着你应该这样做 ;) - Felix Kling

@FelixKling - 我原以为不可能，直到6分钟前。 :-) - techfoobar

@Christian_Espinoza - 这在IE中很可能会失败。至少旧版本会这样。 - techfoobar