.setAttribute("disabled", false); changes editable attribute to false

I want to have textboxes related to radiobuttons. Therefore each radio button should enable it's textbox and disable the others. However when I set the disabled attribute of textbox to true, it changes the editable attribute too. I tried setting editable attribute true again but it did not work.

This was what I tried:

JS function:

function enable(id)
{
    var eleman = document.getElementById(id);
    eleman.setAttribute("disabled", false);
    eleman.setAttribute("editable", true);
}

XUL elements:

<radio id="pno" label="123" onclick="enable('ad')" />
<textbox id="ad" editable="true"  disabled="true" flex="1" emptytext="asd" onkeypress="asd(event)" tooltiptext="" >

A disabled element is, (self-explaining) disabled and thereby logically not editable, so:

set the disabled attribute [...] changes the editable attribute too

Is an intended and well-defined behaviour.

The real problem here seems to be you're trying to set disabled to false via setAttribute() which doesn't do what you're expecting. an element is disabled if the disabled-attribute is set, independent of it's value (so, disabled="true", disabled="disabled" and disabled="false" all do the same: the element gets disabled). you should instead remove the complete attribute:

element.removeAttribute("disabled");

or set that property directly:

element.disabled = false;

Just set the property directly: .

eleman.disabled = false;

Using method set and remove attribute

function radioButton(o) {

  var text = document.querySelector("textarea");

  if (o.value == "on") {
    text.removeAttribute("disabled", "");
    text.setAttribute("enabled", "");
  } else {
    text.removeAttribute("enabled", "");
    text.setAttribute("disabled", "");
  }
  
}

<input type="radio" name="radioButton" value="on" onclick = "radioButton(this)" />Enable
<input type="radio" name="radioButton" value="off" onclick = "radioButton(this)" />Disabled<hr/>

<textarea disabled ></textarea>

Try doing this instead:

function enable(id)
{
    var eleman = document.getElementById(id);
    eleman.removeAttribute("disabled");        
}

To enable an element you have to remove the disabled attribute. Setting it to false still means it is disabled.

http://jsfiddle.net/SRK2c/

.setAttribute("disabled", false); changes editable attribute to false

Related

Recent Posts