通过复选框在JavaScript中禁用控件

Question

我目前有四个文本框，一个复选框和一个下拉列表。我试图在复选框被勾选时禁用文本框和下拉列表。我的当前代码不起作用，但我似乎找不到错误。我是JavaScript的新手。

function enableCheckBox(phyAddressCheckBox, tb1, tb2, tb3, file1, tb4)
{
    if (document.getElementById(phyAddressCheckBox).checked) 
{
document.getElementById('tb1').enabled = true;
document.getElementById(tb2).enabled = true;
document.getElementById(tb3).enabled = true;
document.getElementById(file1).enabled = true;
document.getElementById(tb4).enabled = true;
}
else
{
document.getElementById(tb1).enabled = false;
document.getElementById(tb2).enabled = false
document.getElementById(tb3).enabled = false;
document.getElementById(file1).enabled = false;
document.getElementById(tb4).enabled = false;
}
}

编辑 我将两个条件下的所有属性都设置为禁用，但仍然没有任何作用。

<script type="text/javascript" language="javascript">
function enableCheckBox(phyAddressCheckBox, tb1, tb2, tb3, file1, tb4)
{
    if (document.getElementById(phyAddressCheckBox).checked) 
{
    document.getElementById('tb1').disabled = 'disabled';
document.getElementById(tb2).disabled = 'disabled';
document.getElementById(tb3).disabled = 'disabled';
document.getElementById(file1).disabled = 'disabled';
document.getElementById(tb4).disabled = 'disabled';
}
else
{
document.getElementById(tb1).disabled = 'disabled';
document.getElementById(tb2).disabled = 'disabled';
document.getElementById(tb3).disabled = 'disabled';
document.getElementById(file1).disabled = 'disabled';
document.getElementById(tb4).disabled = 'disabled';
}
}
</script>

我还添加了控制代码。

<asp:CheckBox ID="phyAddressCheckBox" runat="server"  onclick="enableCheckBox(this.ID, physicalAddressTextbox, PhysicalAddress2Textbox, CityTextbox, physicalStateDropDownList,physicalZipTextbox)" style="text-align: left" />

- bluesky

---

你的问题是因为你引用了 tb1 参数吗？ - Ruan Mendes

我进行了更改，但是纠正仍然没有起作用。 - bluesky

展示您的错误。您没有描述哪里出了问题。更好的做法是创建一个http://jsfiddle.net并在此处发布它。 - Ruan Mendes

当复选框被选中时，文本框和下拉列表仍然可用。 - bluesky

控制台上有错误吗？阅读我的答案，我相信你会在我的建议和我在http://jsfiddle.net/mendesjuan/7ZEvk/2/上发布的代码中找到问题。 - Ruan Mendes

你的代码仍然无法工作的原因是因为你试图调用 document.getElementById('tb1') 而不是 document.getElementById(tb1)。 - Ruan Mendes

Answer 1

尝试：

document.getElementById(tb1).disabled='disabled';

- Diodeus - James MacFarlane

---

请参见：https://dev59.com/sEnSa4cB1Zd3GeqPQ8Us - Diodeus - James MacFarlane

disabled属性接受true或false值。HTML属性接受字符串。我从来没有在设置disabled = true or false时遇到过问题。https://developer.mozilla.org/en/DOM/HTMLInputElement - Ruan Mendes

个人而言，我会使用jQuery并设置属性：$(tb1).attr('disabled','disabled')。 - Diodeus - James MacFarlane

你可以使用任何你喜欢的东西，但是你需要告诉我们为什么。 - Ruan Mendes

disabled='disabled' 是使 XHTML 有效的必要部分。 <input disabled> 不是有效的，但是 <input disabled='disabled'> 是有效的。 - Diodeus - James MacFarlane

当使用 input.disabled 时，您并没有设置 HTML 属性，而是在更改 DOM 节点属性。此外，disabled 是有效的，HTML5 不是 XHTML。即使在 HTML 中，http://dev.w3.org/html5/markup/input.checkbox.html 告诉您不带值的 disabled 是完全有效的。 - Ruan Mendes

Answer 2

我不同意那些让你使用disabled='disabled'的人。输入元素上的禁用属性接受一个布尔值，与HTML属性不同。 https://developer.mozilla.org/en/DOM/HTMLInputElement

从你传递给 enableCheckBox 的变量名来看，看起来你传递的是DOM节点而不是ids。

另一个问题是你传递了this.ID，你应该传递this.id。更好的方法是直接传递元素本身。看这个例子http://jsfiddle.net/mendesjuan/7ZEvk/2/

最后一个问题（在初始示例中）是你试图设置一个enabled属性，但这并不存在。你必须设置disabled属性。

HTML

<input type='checkbox' id='cbox' onclick="enableCheckBox(this, 'text1', 'text2', 'text3', 'sel');"/>

<input id='text1' />
<input id='text2' />
<input id='text3' />
<select id='sel'>
    <option>hello</option>
</select>

JavaScript

// This is a lot like your function, but is less repetitive
function enableCheckBox(cbox /*, ... ids of fields to enable/disable */){    
    for (var i = 1; i < arguments.length; i++) {
        document.getElementById(arguments[i]).disabled = cbox.checked;
    }
}

- Ruan Mendes

---

我所引用的并不相同。 - bluesky

@MasterP：啥？哪个不同于哪个？ - Ruan Mendes

Answer 3

使用 disabled 属性：

document.getElementById(tb1).disabled = 'disabled';

- Ibu

Answer 4

利用removeAttribute和setAttribute，当存在disabled时，它是disabled，否则element是enabled。你可以这样做：

function enableCheckBox(phyAddressCheckBox, tb1, tb2, tb3, file1, tb4){
    if (document.getElementById(phyAddressCheckBox).checked){
       document.getElementById(tb1).removeAttribute("disabled");
       document.getElementById(tb2).removeAttribute("disabled");
       document.getElementById(tb3).removeAttribute("disabled");
       document.getElementById(file1).removeAttribute("disabled");
       document.getElementById(tb4).removeAttribute("disabled");
    }else{
       document.getElementById(tb1).setAttribute("disabled", "disabled");
       document.getElementById(tb2).setAttribute("disabled", "disabled");
       document.getElementById(tb3).setAttribute("disabled", "disabled");
       document.getElementById(file1).setAttribute("disabled", "disabled");
       document.getElementById(tb4).setAttribute("disabled", "disabled");
   }
}

- dku.rajkumar