无法启用禁用的输入[重复]

Posted 2023-02-22

【中文标题】无法启用禁用的输入[重复]

【英文标题】：Unable to enable disabled input [duplicate]

【发布时间】：2015-12-24 02:19:34

【问题描述】：

输入元素很容易被禁用，但是有什么方法可以启用它们呢？

下面的代码可以禁用但不能启用输入元素。

$('#dis').click(function() 
  $('#inp').attr('disabled', 'true');
);

$('#enb').click(function() 
  $('#inp').attr('disabled', 'false');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='inp' type='text'>
<button id='enb'>Enable</button>
<button id='dis'>Disable</button>

【问题讨论】：

不要用户 $().attr() 用户 $().prop() 代替。见api.jquery.com/prop

【参考方案1】：

只是为了扩展答案...

真正的问题是您试图通过 setAttribute() 将 disabled 设置为 false，这与您的预期不同。如果设置了 disabled-attribute，则元素被禁用，无论值如何 所以，disabled="true"、disabled="disabled" 和 disabled="false" 都是等价的：元素被禁用）。

您应该改为删除完整属性

$('#enb').click(function() 
   $('#inp').removeAttr('disabled');
);

【参考方案2】：

问题在于您的代码将 true 和 false 写在引号中，使它们成为字符串而不是布尔值。请注意，'true' 和 'false' 都是真值，因此您的代码在这两种情况下都将启用的值设置为真。

我希望以下内容对您有用，请检查 sn-p：

$('#dis').click(function() 
    $("#inp").prop('disabled', true);
);

$('#enb').click(function() 
    $("#inp").prop('disabled', false);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='inp' type='text'>
<button id='enb'>Enable</button>
<button id='dis'>Disable</button>

【参考方案3】：

只需删除disabled 属性

$('#enb').click(function() 
   $('#inp').removeAttr('disabled');
);

【讨论】：

这不是一个好的做法。来自文档：Do not use this method to remove native properties such as checked, disabled, or selected.

为什么不呢？ @NitaiJ.Perez 有什么见解吗？

@anurageldorado，文档提到它可能会永久删除道具/属性，不允许重新设置。

所以在所有情况下都没有那么有害对吧？

@anurageldorado，为什么要冒险？请参阅我的答案以获取安全的方法。

【参考方案4】：

您可以使用removeAttr()

$('#dis').click(function() 
  $('#inp').attr('disabled', 'true');
);

$('#enb').click(function() 
  $('#inp').removeAttr('disabled');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='inp' type='text'>
<button id='enb'>Enable</button>
<button id='dis'>Disable</button>

【参考方案5】：

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='inp' type='text'>
<button id='enb'>Enable</button>
<button id='dis'>Disable</button>
<script type="text/javascript">
    $( document ).ready(function() 

$( "#dis" ).click(function() 
  $('#inp').prop( "disabled", true );

);

$( "#enb" ).click(function() 
  $('#inp').prop( "disabled", false );
);

);
</script>

【参考方案6】：

嗨试试下面的代码

布尔值和字符串之间存在差异，而不是 'true' 使用 true 而不使用 引号

$('#dis').click(function() 
  $('#inp').attr('disabled', true);
);

$('#enb').click(function() 
  $('#inp').attr('disabled', false);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='inp' type='text'>
<button id='enb'>Enable</button>
<button id='dis'>Disable</button>

【讨论】：

同样，attr() 方法不适用于布尔值

@Lacrioque 谁在说？

Jquey 在线文档：api.jquery.com/prop 查看属性与属性

回答你所说的使用布尔值..

Pre 1.6 Jquery 使用带有 attr() 的布尔值我告诉你，但是在引入 prop() 方法之后，文档清楚地指出，使用带有 attr() 的布尔值会导致错误。如果你有一个工作代码很棒！但是布尔值不应该与 attr() 一起使用

【参考方案7】：

试试

$('#dis').click(function() 
  $('#inp').attr('disabled', 'true');
);

$('#enb').click(function() 
  $('#inp').removeAttr('disabled');
);

因为disable="disable" 等于disable 本身

【参考方案8】：

有办法！您需要像这样删除禁用的属性：

$('#inp').removeAttr('disabled');