CODEWITHSUNDEEP
javascriptjqueryhtml
n4ks
n4ks

Reputation: 148

jQuery prop() method works, but it doesn't add the "disabled" attribute to the element

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 am I doing wrong? Thanks!

Upvotes: 1

Views: 1884

Answers (3)

JestaBlunt
JestaBlunt

Reputation: 173

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.

Upvotes: 0

ﾃﾞﾋﾞｯﾄ
ﾃﾞﾋﾞｯﾄ

Reputation: 289

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>

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

Since disabled is a Boolean attribute, you need to set it like disabled="disabled":

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

Upvotes: 0

Related Questions