Question

我正试图从某些HTML元素中动态删除'readonly'属性。

我已经创建了一个[JSFiddle here] [1]来显示我的问题，这是我的代码片段：

$('#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 doc说的是什么：

注意：请勿使用此方法删除原生属性，例如选中，禁用或已选中。这将删除该属性完全，一旦删除，不能再添加到元素。 使用 .prop（）将这些属性设置为false。

您必须使用prop属性才能执行此操作

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

Fiddle

<强>段

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

jQuery＆＃39; .removeProp()的文档清楚地表明它不应该被用来删除原生属性。

请勿使用此方法删除本机属性，例如已选中，已禁用或已选中。这将完全删除属性，一旦删除，就不能再次添加到元素。使用.prop（）将这些属性设置为false。

使用.prop('readonly', false)代替使文本框可写。另外，正如@guradio所建议的，select boxes don't have readonly property。请使用.prop('disabled', false)阻止用户对其进行编辑。

更多详情here。

Answer 3

你应该使用jQuery的attr函数：

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

虽然使用prop也可以使用，但best practice适用于您的情况是使用attr。

无法使用jQuery

3 个答案: