I have a plex 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?

I have a plex 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?

• javascript
• jquery
• css
• button
• disabled-input

• 1 Are you using document-ready handler? Your code is correct – Satpal Commented Jun 30, 2014 at 16:20
• 1 Can you create a fiddle for this? – j08691 Commented Jun 30, 2014 at 16:21
• 1 @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 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 Commented Jun 30, 2014 at 16:25
• if you inspect one of the buttons is the disabled attribute present? – ry4nolson Commented Jun 30, 2014 at 16:34

2 Answers 2

I created a fiddle http://jsfiddle/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.

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

});