如何在javascript中设置asp:checkbox的可见性

Question

我的页面中有这个asp:复选框，在特定条件下，我想隐藏它。我试图在JavaScript函数中通过设置style.display='none'来实现这一点。但不知何故，asp:checkbox被呈现为两个html控件，input和label。输入已经消失，但标签仍然存在。那么，我该如何在JavaScript中正确隐藏asp:复选框呢？以下是我的代码：

var checkBox= document.getElementById('ctl00_ContentPlaceHolder1_checkBox');
if (...)
{
    checkBox.style.display='none';
}

并遵循

<td>
<asp:CheckBox ID="checkBox" runat="server" Text="Test" onclick="..."/></td>

将呈现为

<td><span disabled="disabled"><input id="ctl00_ContentPlaceHolder1_checkBox" type="checkbox" name="ctl00$ContentPlaceHolder1$checkBox" disabled="disabled" onclick="...;" /><label for="ctl00_ContentPlaceHolder1_checkBox">Test</label></span></td>

Answer 1

正如MikeSmithDev所说，您也需要隐藏标签。在您的代码中，您可以添加以下内容：

var checkBoxLabel = document.querySelectorAll('label[for=ctl00_ContentPlaceHolder1_checkBox]');
if (checkBoxLabel.length > 0) checkBoxLabel[0].style.display='none';

它通过其for属性来定位标签，如果存在，则将其隐藏。

或者更简单——假设标签总是跟随输入：

if (...)
{
    checkBox.style.display='none';
    checkBox.nextSibling.style.display='none';
}

这将隐藏复选框后面的元素-标签。

顺便说一句，如果这适用于你——在服务器端，它是一个oneliner

checkBox.Style["display"] = "none"; // will render the control hidden

或

checkBox.Visible = false; // will not render control at all