javascript - How to enable and disable HTML's disabled property - Stack Overflow

admin 管理员组

文章数量: 1087134

I am constructing an HTML button object inside a function. I want to enable or disable the button depending on a condition from this function's parameter. I have simplified my problem to the code below:

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);
}

The problem here is that the disabled flag does not work with true or false. According to the official HTML5 specs:

.html#enabling-and-disabling-form-controls:-the-disabled-attribute

.html#boolean-attribute,

only valid options for disabled are

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

So how do I get around this? I also tried setting disabled = null but that does not work.

I am constructing an HTML button object inside a function. I want to enable or disable the button depending on a condition from this function's parameter. I have simplified my problem to the code below:

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);
}

The problem here is that the disabled flag does not work with true or false. According to the official HTML5 specs:

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

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

only valid options for disabled are

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

So how do I get around this? I also tried setting disabled = null but that does not work.

• javascript
• jquery
• css
• html

Share Improve this question Follow edited May 1, 2017 at 19:27 OneMoreQuestion asked May 1, 2017 at 19:23 OneMoreQuestionOneMoreQuestion 1,75344 gold badges2525 silver badges5151 bronze badges 5

• 6 if (condition = true) should be if (condition == true) – j08691 Commented May 1, 2017 at 19:25
• 1 just set enableBtn = "disabled" or enableBtn = "". – Karthik Ganesan Commented May 1, 2017 at 19:27
• in case your button have id attribute you can directly use jquery attr('disabled',false) or set it to true – RohitS Commented May 1, 2017 at 19:27
• @j08691 thanks for catching that, was a typo – OneMoreQuestion Commented May 1, 2017 at 19:28
• if(condition) {$el.attr('disabled', 'disabled');} else {$el.removeAttr('disabled')}? – Gogol Commented May 1, 2017 at 20:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can also use empty string if condition is not true and assign enableBtn to disabled if true.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Test button</button>
<div id="testLocation"></div>

Disabled is a "boolean attribute," which is just a fancy spec way of saying that the attribute is considered "true" if present (whether you use disabled="spaghetti" or disabled="disabled" is irrelevant), and "false" if absent. Thus, you actually need to toggle whether or not the attribute is added to your HTML element, instead of simply changing its value.

From the page you linked:

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

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

test(true)

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

add/remove disabled attribute

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

$(input).removeAttr('disabled')

Try below code.

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);
}

---

Or you could do like this

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

Try these..

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

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

This always works for me when I want to toggle disabled:

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

Very straightforward. And if you want to remove it,

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

This does not require a second parameter.

本文标签： javascriptHow to enable and disable HTML39s disabled propertyStack Overflow