How to set `aria-disabled` as true using JavaScript

Question

I have no idea about JS. But there is needed one line of code in my Ruby. I have the below html.

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
   <div class="ui-dialog-buttonset">
      <button class="otherButtonClass ui-state-hover ui-state-focus" type="button" role="button" aria-disabled="false">
      <button class="otherButtonClass" type="button" role="button" aria-disabled="false" style="display: none;">
      <button class="cancelButtonClass" type="button" role="button" aria-disabled="false">
   </div>
</div>

I want JS code to make the first and second button to make them visible. What would be the code?

Please help.

Answer 1

The current way of setting aria- attributes is to reference the properties directly.

To get:

let el = document.getElementById('foobar');
console.log(el.ariaDisabled); // Should log the current value of aria-disabled.

To set:

let el = document.getElementById('foobar');
el.ariaDisabled = 'true';
console.log(el.ariaDisabled); // Should log 'true'.

Reference: Element.ariaDisabled MDN