如何启用和禁用 HTML 禁用属性答案

【问题标题】：How to enable and disable HTML's disabled property如何启用和禁用 HTML 禁用属性
【发布时间】：2017-05-02 03:50:38
【问题描述】：

我正在函数内部构造一个 HTML 按钮对象。我想根据此函数参数中的条件启用或禁用按钮。我已将我的问题简化为以下代码：

function test(condition) {
    var html = ""

    var enableBtn = false;

    if (condition == true) {
        enableBtn = true;
    } else {
        enableBtn = false;
    }

    html += '<button type="button" disabled="' + enableBtn + '"> Click </button></div>';

    $("#testLocation").html(html);
}

这里的问题是disabled 标志不适用于true 或false。根据官方 HTML5 规范：

https://www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute

https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute,

只有disabled 的有效选项是

<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="disabled" />

那么我该如何解决这个问题？我也尝试设置disabled = null，但这不起作用。

【问题讨论】：

if (condition = true) 应该是if (condition == true)
只需设置 enableBtn = "disabled" 或 enableBtn = ""。
如果您的按钮有 id 属性，您可以直接使用 jquery attr('disabled',false) 或将其设置为 true
@j08691 感谢您的理解，这是一个错字
if(condition) {$el.attr('disabled', 'disabled');} else {$el.removeAttr('disabled')}?

标签： javascript jquery css html

【解决方案1】：

如果条件不成立，您也可以使用空字符串，如果为真，则将enableBtn 分配给disabled。

function test(condition) {
        var html = ""

        var enableBtn = '';

        if (condition == true) {
            enableBtn = 'disabled';
        } else {
            enableBtn = '';
        }

        html += '<button type="button" ' + enableBtn + '> Click </button></div>';

        $("#testLocation").html(html);
    }
    
    $('#test').on('click', function() {
      test(true)
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Test button</button>
<div id="testLocation"></div>

【讨论】：

@OneMoreQuestion 我已经添加了一个代码 sn-p 并且它正在工作。

【解决方案2】：

Disabled 是一个“布尔属性”，这只是一种奇特的规范方式，表示该属性如果存在则被视为“真”（无论您使用 disabled="spaghetti" 还是 disabled="disabled" 都无关紧要），如果存在则“假”缺席的。因此，您实际上需要切换 是否将属性添加到您的 HTML 元素，而不是简单地更改其值。

来自the page you linked：

注意：布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。

function test(condition) {
  $('#testLocation').html(
    '<button type="button" ' + (condition ? 'disabled' : '') + '>Click</button></div>'
  )
}

test(true)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testLocation"></div>

【讨论】：

感谢这个作品，我赞成你的回答。 @julekgwa 的回答更简单，所以我接受了他的
感谢您的支持 :) 不过，我不确定我的答案比您接受的答案更复杂——我的答案短了几行。

【解决方案3】：

添加/删除disabled属性

$(input).attr('disabled','disabled')

$(input).removeAttr('disabled')

试试下面的代码。

function test(condition) {
    var btn = $('<button type="button"> Click </button></div>');

    if (condition == true) {
       btn.attr('disabled','disabled')
    } else {
      // btn.removeAttr('disabled') dont need this..we will add disabled only if required.    
    }

    $("#testLocation").html(btn);
}

或者你可以这样做

function test(condition) {
    $("#testLocation").html('<button type="button" '+(condition?'disabled':'')+'> Click </button></div>');
}

【讨论】：

我试图在构造元素之前设置标志
@OneMoreQuestion 您是否尝试过上述方法？ :)

【解决方案4】：

试试这些..

$('#input').prop('disabled', true);

$('#input').prop('disabled', false);

【讨论】：

我试图在构造元素之前设置标志

【解决方案5】：

当我想切换 disabled 时，这总是对我有用：

$("#testLocation").setAttribute("disabled, "");

非常简单。如果你想删除它，

$("#testLocation").removeAttribute("disabled");

这不需要第二个参数。

【讨论】：