.setAttribute("禁用", false);将可编辑属性更改为 false答案

【问题标题】：.setAttribute("disabled", false); changes editable attribute to false.setAttribute("禁用", false);将可编辑属性更改为 false
【发布时间】：2011-11-23 12:07:53
【问题描述】：

我想要与单选按钮相关的文本框。因此，每个单选按钮都应该启用它的文本框并禁用其他按钮。但是，当我将文本框的禁用属性设置为 true 时，它也会更改可编辑属性。我尝试再次将可编辑属性设置为 true，但它不起作用。

这是我尝试过的：

JS函数：

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

XUL 元素：

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

【问题讨论】：

标签： javascript firefox firefox-addon xul

【解决方案1】：

你来了，

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

【讨论】：

【解决方案2】：

disabled 元素（不言自明）被禁用，因此在逻辑上不可编辑，因此：

设置禁用属性 [...] 也更改可编辑属性

是一种预期且定义明确的行为。

这里真正的问题似乎是您试图通过setAttribute() 将disabled 设置为false，这并没有达到您的预期。如果设置了disabled-属性，则元素被禁用，与它的值无关（因此，disabled="true"、disabled="disabled" 和disabled="false" 都做同样的事情：元素被禁用）。您应该改为删除完整属性：

element.removeAttribute("disabled");

或直接设置该属性：

element.disabled = false;

【讨论】：

好答案，但在后一种情况下，您说“直接设置该属性”，我认为应该是“直接设置该属性”，因为您正在编辑 DOM 属性而不是 HTML 属性。细微的差别，但我认为在这里很重要。
有什么方法可以使用setAttribute() 来做同样的事情吗？ setAttribute("disabled","true"); 不起作用；

【解决方案3】：

使用方法set和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>

【讨论】：

【解决方案4】：

只需将 'myselect' 替换为您的 id

禁用->

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

启用->

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

【讨论】：

【解决方案5】：

直接设置属性即可：.

eleman.disabled = false;

【讨论】：

有什么方法可以使用 setAttribute() 来做同样的事情吗？ setAttribute("已禁用","true");不工作
@AjayAradhya - 请参阅已接受的答案。 disabled 属性是布尔值，它的存在将其值设置为 true。解决此问题的唯一方法是将属性设置为 false 或使用 removeAttribute 删除属性。

【解决方案6】：

实际上不考虑禁用的属性值..通常如果您注意到该属性设置为 disabled="disabled" 此处的“禁用”不是必需的..因此最好的办法是删除该属性.

element.removeAttribute("disabled");

你也可以这样做

element.disabled=false;

【讨论】：

【解决方案7】：

尝试这样做：

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

要启用元素，您必须删除 disabled 属性。将其设置为 false 仍然意味着它被禁用。

http://jsfiddle.net/SRK2c/

【讨论】：