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

添加/删除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>');
}

Answer 2

已禁用是一个“布尔属性”，这只是一种奇特的规范方式，即如果存在属性被认为是“真实”（无论您使用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>

Answer 3

如果条件不为真，您也可以使用空字符串，如果为真，则可以将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>

Answer 4

试试这些..

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

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

Answer 5

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

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

非常直截了当。如果你想删除它，

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

这不需要第二个参数。

如何启用和禁用HTML的禁用属性

5 个答案: