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

Question

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="" >

Unmusical

Answer 1

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;

Education

Answer 2

Just set the property directly: .

eleman.disabled = false;

Rodmur

is there any way i can use setAttribute() to do the exact same thing? setAttribute("disabled","true"); doesn't work – Fifteen

@AjayAradhya—see the accepted answer. The disabled attribute is boolean, its presence sets its value to true. The only way to fix that is to either set the property to false or remove the attribute using removeAttribute. – Rodmur

Answer 3

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>

Purificator

Answer 4

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/

Elite

Answer 5

the disabled attributes value is actally not considered.. usually if you have noticed the attribute is set as disabled="disabled" the "disabled" here is not necessary persay.. thus the best thing to do is to remove the attribute.

element.removeAttribute("disabled");     

also you could do

element.disabled=false;

Comnenus

Answer 6

There is another method toggleAttribute() more specific to this use case.

element.toggleAttribute("disabled");

Removes a boolean attribute (disabled, readonly, selected, etc.) if it is present, or adds it if not.

The optional second argument is an expression to determine if the attribute should be added or removed:

element.toggleAttribute("disabled", true);
element.toggleAttribute("disabled", false);
element.toggleAttribute("disabled", element.value === something);
element.toggleAttribute("disabled", some_function(element));

Biotechnology

Answer 7

just replace 'myselect' with your id

to disable->

document.getElementById("mySelect").disabled = true;  

to enable->

document.getElementById("mySelect").disabled = false; 

Triad

Answer 8

There you go,

<div immutable='id,class' id='abc' class='xyz'></div>
<h1 immutable='onclick' onclick='alert()'>HI</h1>
<p immutable='id' subtree>
   <!-- now childs id are immutable too -->
   <span id='xyz'>HELLO</span>
</p>

</script>
   const mutationHandler = entries => {
    entries.forEach(entry => {
        if (entry.type !== 'attributes') return;
        mutationObserver.disconnect()
        entry.target.setAttribute(entry.attributeName, entry.oldValue)
        observe()
    })
}

const mutationObserver = new MutationObserver(mutationHandler)

const observe = () => {
    let items = document.querySelectorAll('[immutable]');
    items.forEach(item => {
        let subtreeEnabled = item.getAttribute('subtree') != null

        let immutableAttr = item.getAttribute('immutable')
        let captureAttrs = immutableAttr.split(',');
        captureAttrs.push('immutable')
        captureAttrs.push('subtree')
        
        mutationObserver.observe(item, {
            subtree: subtreeEnabled,
            attributes: true,
            attributeOldValue: true,
            attributeFilter: captureAttrs
        })
    })
}
observe()
</script>

Uveitis

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Poltroonery