【问题标题】: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>

【问题讨论】:

标签: javascript jquery html


【解决方案1】:

只是为了扩展答案...

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

您应该改为删除完整属性

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

【讨论】:

    【解决方案2】:

    问题在于您的代码将 truefalse 写在引号中,使它们成为字符串而不是布尔值。请注意,'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');
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2013-12-02
              • 1970-01-01
              • 1970-01-01
              • 2021-11-20
              • 1970-01-01
              • 2019-07-18
              • 2018-01-14
              • 1970-01-01
              相关资源
              最近更新 更多