jquery - 如何通过单击按钮更改表单输入的只读属性

Question

我创建了一个表单，其中包含一些Readonly 输入字段和所有输入字段旁边的图标。 单击特定字段旁边的图标时，如何更改特定字段的 Readonly 属性。

表格

<div class="input-group">
<input class="input--style-3" type="text" name="phone" id="phone" placeholder="Phone" value= "<?php echo $this->session->userdata('phone'); ?>" />
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
</div>

Answer 1

$('.input-group-addon').click(function(){
  $(this).parent() // gets parent container 'input-group'
    .children('input') // gets the input in the container
    .removeAttr('readonly'); // removes the readonly attr from the input
});

• 我们将一个函数绑定(bind)到元素的点击(在您的例子中是图标)
• 我们正在选择“this”的父元素以获取我们的图标包含在其中的元素
• 我们正在寻找一个类型为“input”的子元素(一个直接位于我们父元素内部的元素，与我们的图标相邻)(如果您要进行语义标记，则应该只有一个元素)
• 我们正在从输入元素中删除一个属性

我在这里测试了完美的结果(在点击红色方 block 之前你不能改变电话号码)https://codepen.io/anon/pen/pXXPNo

我希望这不仅能插入你前进，还能帮助你理解

此外，如果您正在动态创建元素而不是让它们在 DOM 中加载，则需要像这样更改绑定(bind):

$('body .input-group-addon').on("click", function(){
  $(this).parent() // gets parent container 'input-group'
    .children('input') // gets the input in the container
    .removeAttr('readonly'); // removes the readonly attr from the input
});