javascript - 如何启用和禁用 HTML 禁用属性

Question

我正在一个函数内构造一个 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 但这不起作用。

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