Javascript/jQuery disable buttons by classname

Question

I have a complex Javascript app which populates a button depending on the app state and readonly permissions:

But essentially the button looks like this when it is added to the document:

<button type="button" id="..." class="btn btn-link btn-table-action btn-table-add-row" title="Add"></button>

The id is auto generated and is not known before hand. Besides we have several of these buttons, that all need to be disabled/enabled simultaneously.

I tried the following with no luck:

$(".btn-table-add-row").prop('disabled', true);

setInterval(function() {
  $(".btn-table-add-row").prop('disabled', true);
}, 1000);

var elems = document.getElementsByClassName("btn-table-add-row");
console.log(elems);
for(var i = 0; i < elems.length; i++) {
  elems[i].disabled = true;
}

The above examples were all tried on page load, after the document has loaded and the buttons are visible. I am able to read the elems list in the last example, but they will not disable. Any suggestions?

@Satpal yes the code looked correct, in most of its incarnations. I think it has something to do with the order that the button is generated in the DOM — Husman
– Husman, Commented Jun 30, 2014 at 16:23
@j08691 - I could create a fiddle, but it would not be an accurate representation of my problem as it is an enterprise app with several thousand lines of code, and DOM rendering is done by an inhouse javascript engine. — Husman
– Husman, Commented Jun 30, 2014 at 16:25
if you inspect one of the buttons is the disabled attribute present? — ry4nolson
– ry4nolson, Commented Jun 30, 2014 at 16:34

mfleshman · Accepted Answer · 2014-06-30 16:31:44Z

2

I created a fiddle http://jsfiddle.net/mfleshman/yR9U3/

<button type="button" class="btn btn-link btn-table-action btn-table-add-row" title="Add">test</button>

<button type="button" class="btn btn-link btn-table-action btn-table-add-hide" title="Add">test</button>

$(".btn-table-add-row").prop('disabled', true);
$(".btn-table-add-hide").hide();

You stated the buttons are "visible". Disabling a button will not hide it from the page unless you have additional CSS selectors doing this.

If you are trying to hide the buttons you need to call .hide() on the element.

answered Jun 30, 2014 at 16:31

mfleshman

3334 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ry4nolson Over a year ago

I think he was just saying that they are visible when he runs this code.

Husman Over a year ago

Apologies for the confusion. Im not trying to hide the buttons, just disable them and stop it from being clicked.

M.K.S. · Accepted Answer · 2014-06-30 16:51:08Z

As Satpal and yourself have mentioned, the code is correct (at least the first sentence i tried), so the problem will be either in the order in which the buttons are created, or maybe in an error during the execution of other JS code that causes yours to not run.

I also created a fiddle for this and your code is working: http://jsfiddle.net/gx7zC/

$(document).ready(function(){
var btnAmount = Math.floor((Math.random() * 10) + 1);
for(var i=0; i<btnAmount;i++){
    var newButton = document.createElement("button");
    $(newButton).addClass("btn btn-link btn-table-action btn-table-add-row");
    newButton.id = "btn"+i;
    $(newButton).text("btn"+i);
    document.body.appendChild(newButton);
}
$(".btn-table-add-row").prop('disabled', true);

});

Collectives™ on Stack Overflow

Javascript/jQuery disable buttons by classname

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related