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, Jun 30 '14 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, Jun 30 '14 at 16:25
if you inspect one of the buttons is the disabled attribute present? — ry4nolson, Jun 30 '14 at 16:34
okay, can you tell us how those elements are being generated? — code-jaff, Jun 30 '14 at 16:34
Are there any errors raised in the JS console? What version of jQuery are you using? Can you write a simple function to implement the disabling, and using `console.log()` to report which element(s) are being affected, and if they're being affected? Is there a likelihood that other parts of the 'in-house JavaScript engine' is reacting to an event to re-enable the buttons? — David Thomas, Jun 30 '14 at 16:35
What happens when you type it in from a console? The code here is correct, the problem is more likely in where it's being called. — blgt, Jun 30 '14 at 16:37
@DavidThomas There are no errors in the console, latest version of jQuery - pulled in using requirejs, No elements are being affected. I do think that the rendering engine, is adding the button in a weird way, which stops the button from being detected by jQuery. — Husman, Jun 30 '14 at 16:40

score 2 · Answer 1 · answered Jun 30 '14 at 16:31

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 '14 at 16:31

mfleshman

313
4
11

I think he was just saying that they are visible when he runs this code. – ry4nolson Jun 30 '14 at 16:35
Apologies for the confusion. Im not trying to hide the buttons, just disable them and stop it from being clicked. – Husman Jun 30 '14 at 16:38

score 0 · Answer 2 · answered Jun 30 '14 at 16:51

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

});

Javascript/jQuery disable buttons by classname

2 Answers2