如何在客户端单击复选框时禁用文本框

Question

如何使用JavaScript在客户端单击HTML复选框或服务器端asp:CheckBox时禁用asp:TextBox？

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

- abatishchev

Answer 1

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

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

如果你不喜欢这种 "意大利面条代码"，也许你想把你的JavaScript放在一个单独的文件中，你可以避免使用id来选择字段。相反，你可以用一个class来装饰它。在这种情况下，你可能需要使用某种选择器库来在JavaScript中查找控件，jQuery是一个流行的选择。

- Jørn Schou-Rode

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

- abatishchev

Answer 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'));
    });
  });

- Matt