无法使用jQuery从html选择中删除readonly

Question

我试图动态地从一些HTML元素中删除“readonly”属性。

我在这里创建了一个JSFiddle来展示我的问题，下面是我的代码片段：

​

$('#theButton').on('click', function() {
  $('#mySelect').removeProp('readonly');
  $('#textInput').removeProp('readonly');
  //stop the form posting back
  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>Some input fields</label>
  <input type='text' class='form-control' id='textInput' readonly>
  <select id='mySelect' readonly class='form-control input-sm '>
    <option>1</option>
    <option>2</option>
    </select>
  <button class='btn btn-primary' id='theButton'>
    Enable Button
    </button>
</form>

​

Answer 1

使用removeProp是不正确的。

.removeProp()方法移除由.prop()方法设置的属性。

看看JQuery医生是怎么说的：

注意：不使用此方法删除本机属性，如选中、禁用或选中。这将完全删除该属性，一旦删除，将无法再次添加到元素中。使用.prop()将这些属性设置为false。

您必须使用prop属性来完成此操作。

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

小提琴

片段

​

$('#theButton').on('click', function() {
  $('#mySelect').prop('disabled', false);
  $('#textInput').prop('readonly', false);
  return false;
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <label>Some input fields</label>
   <input type='text' class='form-control' id='textInput' readonly>
   <select id='mySelect' disabled class='form-control input-sm '>
       <option>1</option>
       <option>2</option>
   </select>
   <button class='btn btn-primary' id='theButton'>Enable Button </button>
</form>

​

Answer 2

您应该使用jQuery的attr函数：

$('#mySelect').attr("readonly", false);
$('#textInput').attr("readonly", false);

虽然使用prop也会起作用，但是对于您的情况来说，最佳做法是使用attr。

Answer 3

jQuery的.removeProp()文档明确指出，不应该使用它来删除本机属性。

不要使用此方法删除本机属性，如选中、禁用或选定。这将完全删除该属性，一旦删除，将无法再次添加到元素中。使用.prop()将这些属性设置为false。

使用.prop('readonly', false)使您的文本框可写。同样，正如@古拉迪奥建议的那样，复选框没有只读属性。请使用.prop('disabled', false)防止用户编辑它。

更多细节这里。