如何在客户端单击 CheckBox 禁用 TextBox答案

【问题标题】：How to disable TextBox on client-side click on CheckBox如何在客户端单击 CheckBox 禁用 TextBox
【发布时间】：2011-02-04 01:51:30
【问题描述】：

如何在client-side 上禁用asp:TextBox 点击HTML checkbox 或服务器端asp:CheckBox 使用JavaScript？

<script type="text/javascript" language="javascript">
    function enableTextbox() {
        // ?
    }
</script>

<table>
    <tr>
        <td>
            <input id="checkTake" onclick="enableTextbox" title="Take?" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox runat="server" ID="txtCommission" />
        </td>
    </tr>
</table>

【问题讨论】：

标签： .net asp.net javascript checkbox client-side

【解决方案1】：

这里的棘手部分是 ASP.NET 为所有 runat="server" 元素分配自动生成的 id 属性，包括您的 TextBox。一个简单的解决方案是将生成的id“注入”到脚本中：

function enableTextbox() {
   var txtCommision = document.getElementById("<%= txtCommision.ClientID %>");
   txtCommision.disabled = !this.checked;
}

如果您更喜欢不使用这种类型的“意大利面条代码”——也许您希望 JavaScript 在单独的文件中——您可以避免使用 id 来选择 <input> 字段。相反，您可以使用class 来装饰它。在这种情况下，您可能希望使用某种选择器库来查找 JavaScript 中的控件，jQuery 是一种流行的选择。

【讨论】：

【解决方案2】：

<script type="text/javascript" language="javascript">
    function enableTextbox(checkbox) {
        document.getElementById('<%= txtCommission.ClientID %>').disabled = !document.getElementById(checkbox).checked;
    }
</script>

<table>
    <tr>
        <asp:CheckBox runat="server" ID="checkTake" onclick="enableTextbox(this.id)" Checked="true" Text="Take?" />
    </tr>
    <tr>
        <td>
            <asp:TextBox runat="server" ID="txtCommission" MaxLength="8" CssClass="right" />
        </td>
    </tr>
</table>

【讨论】：

【解决方案3】：

function enableTextbox() {
  document.getElementById("<%= txtCommision.ClientID %>").disabled = !document.getElementById("checkTake").checked;
};

您还需要实际调用 enableTextbox：

<input id="checkTake" onclick="enableTextbox()" title="Take?" />

jQuery:

  $(document).ready(function () {
    $('#checkTake').bind('click', function () {
      $('#<%= txtCommission.ClientId %>').attr('disabled', !$(this).attr('checked'));
    });
  });

【讨论】：