jQuery prop（）方法有效，但未向元素添加“禁用”属性

Question

I'm trying to disable a button for prevent adding new rows in table. My problem is that prop() method work fine, but doesn't disable button (I can't add new rows, its worked fine, but button still click and looks like "active" (and attribute "disabled" not added to my button)).

If I use attr("disabled", "disabled") instead of prop("disabled", true) that works fine and button disabling (attribute "disabled" added to element), but I read what to use attr() is bad after JQuery 1.6+.

var addBtn = $(".k-grid-add");
addBtn.bind("click", function () {
    if (grid.dataSource.data().length == 9) {
        $(addBtn).prop("disabled", true);          // <- work, but button still "active"
        // $(addBtn).attr("disabled", "disabled"); // <- work fine
    }

What i doing wrong? Thanks!

Answer 1

由于disabled是布尔属性，因此需要将其设置为disabled="disabled" ：

$(addBtn).prop("disabled", "disabled");

Answer 2

It is working for me ! Just look what I tested ....

 addBtn = $("#btn"); addBtn.prop("disabled", true); addBtn.on("click",function() { console.log(999); }); // enable.onclick = function() { addBtn.prop("disabled", false); } // disable.onclick = function() { addBtn.prop("disabled", true); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn">sdf</button> <button id="enable">Enable</button> <button id="disable">Disable</button> 

Answer 3

I can't verify that, it should work. Here's a part my code, which is working, if I enter more than 6 characters, the buttons are active, if I delete it the buttons get disabled. What version of jQuery do you use? Also, the use of bind is deprecated in jQuery version >3.0, using element.on() will be more future proof ( http://api.jquery.com/bind/ ).

$commentsInput.on('input.UECommenting', function (event) {
    let buttonsDisabled = $commentsInput.val().length < 7 ? true : false;
    for (let button in $commentingButtons) {
        $commentingButtons[button].prop({ 'disabled': buttonsDisabled, 'title': buttonsDisabled ? 'No comments without content!' : '' });
    }
});

And I have to recommend getting used to use namespaces for events, with that you can easily use element.off('.namespace') to ensure that your events wont be setted and fired multiple times.