javascript - 当中继器内未选中复选框时禁用文本框

Question

在我的 .aspx 中，以下元素位于中继器内:

<asp:CheckBox runat="server" ID="chkNormalServiceCost" Checked="true" OnClick="EnableDisableTextBox()"/>
<asp:TextBox runat="server" ID="txtNormalServiceCost" />

在<script>中标签中有 jQuery 函数:

function EnableDisableTextBox() {
    $('#chkNormalServiceCost').change(function () {
        if ($('#chkNormalServiceCost').is(':checked') == true)
            $('#txtNormalServiceCost').prop('disabled', false);
        else
            $('#txtNormalServiceCost').prop('disabled', true);
    });
}

但是仍然不起作用。

Answer 1

这是因为控件的 id 属性是在渲染时自动生成的；它不会是客户端的chkNormalServiceCost。您需要为其设置 ClientID 属性:

<asp:CheckBox runat="server" ID="chkNormalServiceCost" ClientID="chkNormalServiceCost" Checked="true" />
<asp:TextBox runat="server" ID="txtNormalServiceCost" ClientID="txtNormalServiceCost" />

然后，您可以使用 jQuery 添加点击处理程序，而不是在第一次 click 触发后附加 change 事件:

$('#chkNormalServiceCost').change(function () {
    $('#txtNormalServiceCost').prop('disabled', !this.checked);
});

Example fiddle