Soumava Das Soumava Das - 3 months ago 10
HTML Question

How to find a particular button/element using both the data-* and value attribute

I have two dynamically generated buttons:

<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" value="Start">Start</button>
<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" disabled="true" value="Complete">Complete</button>


The two buttons have same data-reqID but different values. I am basically trying to find() the button with the data-reqID="24" and value="Complete" and enable the button.
I am very new to JQuery and
I have tried something like this:

$("button[data-reqID='" + reqID+ "'][value=Complete]").attr('disabled', 'false');


But obviously that's syntactically not correct and hence doesn't seem to work.

Answer

Couple of things. If you want to enable the button, you need to set disabled to "false". Also, you need to specify an actual Boolean value for the disabled attribute. Don't supply a string value of "true" of "false".

In other words, it should be"

.attr('disabled', false);

and NOT:

.attr('disabled', 'false');

Full Example:

var reqID = 24;
$('button[data-reqID="' + reqID+ '"][value="Complete"]').attr('disabled', false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" value="Start">Start</button>
<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" disabled="true" value="Complete">Complete</button>