0

我有一个 Telerik MVC Grid，其中有一些列。在第一列中，我有一个复选框，最后一列是一个文本框。我想在单击之前设置为禁用的复选框时启用/禁用文本框。

为此，我在我的 js 中这样做了：

function enableTextBox() {
    $('[name="Checkbox1"]:checked').change(function () {
        var row = $(this).closest('tr');
        if ($(this).is(':checked')) {
            row.find('#Salary').removeAttr('disabled');
        }
        else {
            row.find('#Salary').attr('disabled', 'disabled');
        }
    });
    return true;
}

我的问题是：在 Firefox 中，此功能运行良好。即单击复选框，我的文本框正在启用。

但在 IE9 中，我需要单击两次才能启用文本框。

我该怎么办？

任何建议将不胜感激

4

1 回答 1

0

删除 :checked 伪类并将“attr”切换为“prop”。这是您尝试执行的操作的简化示例：

html:

<input type="checkbox">
<input type="textbox" disabled="disabled">
<br />
<input type="checkbox">
<input type="textbox" disabled="disabled">
<br />
<input type="checkbox">
<input type="textbox" disabled="disabled">
<br />
<input type="checkbox">
<input type="textbox" disabled="disabled">
<br />
<input type="checkbox">
<input type="textbox" disabled="disabled">
<br />

jQuery：

$('input[type="checkbox"]').change(function () {
        var checkbox = $(this);
        checkbox.next().prop('disabled', !checkbox.is(':checked'));
    });

本质上，它所做的是将更改事件绑定到所有复选框，并将下一个元素（在我的情况下为文本框）的禁用状态设置为复选框选中状态。

您的代码可以像这样更新：

function enableTextBox() {
    $('[name="Checkbox1"]').change(function () {
        var checkbox = $(this);
        var row = checkbox.closest('tr');
        row.find('#Salary').prop('disabled', !checkbox.is(':checked'));

    });
    return true;
}

你当然必须从某个地方调用 enableTextBox 函数来触发它，但这应该可以工作。

试试这个jsfiddle，让我知道它是否是你要找的

于 2013-08-02T14:11:09.770 回答