如何在 Internet Explorer 中禁用复选框

Question

我有一个将文本框与复选框配对的应用程序。用户可以选中复选框，该复选框会使用特定的美元金额自动填充文本框。如果他们取消选中该复选框，这会将文本框的值设置为零。他们还可以在文本框中输入美元金额，然后 onblur 事件处理程序会切换复选框。

当他们在文本框中输入美元金额然后单击鼠标选中复选框时，就会出现问题。这会触发 onblur 事件，该事件会自动切换复选框，然后识别鼠标点击，将美元金额设置为零。

我的解决方案是禁用文本框焦点上的复选框，然后启用文本框 onblur 事件上的复选框。

这在 Firefox 和 Chrome 中运行良好，但在 Internet Explorer 中失败了。当复选框被禁用时，FF 和 Chrome 会忽略任何鼠标点击。这意味着当用户在文本框中输入美元金额后单击禁用的复选框时，不会触发 onblur 事件。该复选框保持禁用状态。他们必须单击页面上的其他位置才能启用它。

在 Internet Explorer 中，当用户单击禁用的复选框时会触发 onblur 事件，并且在使用 onblur 事件处理程序选中复选框后立即识别单击，取消选中复选框，将文本框值设置回零。

我需要一个更好的解决方案。如何让 Internet Explorer 像 FF 和 Chrome 一样运行，而忽略对禁用复选框的任何点击。或者，有没有更优雅的解决方案？

示例代码：

<input type=textbox id=textbox1 onFocus=CheckboxDisable('pairedWithTextBox1'); onBlur=CheckboxEnable('pairedWithTextBox1');>
<input type=checkbox id=pairedWithTextBox1>

Javascript 代码：

function CheckboxDisable(id){
    document.getElementById(id).disabled = true;
}

function CheckboxEnable(id){
    document.getElementById(id).disabled = false;
}

Answer 1

缺乏真正的解决方案。 ..您可以在文本元素焦点的复选框上设置数据属性，然后在点击事件的 cb 上检查它并覆盖默认操作。 ..

Answer 2

除了可能令人困惑的用户界面设计（不能肯定，因为您将问题过于笼统），问题在于复选框和文本框都是同一 的 视图 >模型。

• model 是美元金额。
• 文本框是一个视图 实际金额。
• 复选框是一个视图，表示 金额是0 还是其他。

您当前的设计很复杂，这本身并不是一件坏事，因为文本框onblur 和复选框onclick 的事件处理程序也是模型的控制器。 （这有点过于简单化了；控制器还包含浏览器和所有 JavaScript 代码。）

这是一个有助于说明这一事实的解决方案。它基于业务规则工作，一旦用户修改了文本框中的值（到非零值），将复选框的状态从未选中更改为选中将不会更新模型（或文本框 view)。

var txtAmount = document.getElementById('txtAmount');
var chkAmount = document.getElementById('chkAmount');
var defaultValue = 0;
var model = defaultValue;

function UpdateViews() {
    if (model === 0) {
        chkAmount.checked = false;
    }
    txtAmount.value = model.toFixed(2);
}

function UpdateModel(val) {
    // update model when view changes
    model = parseFloat(val) || defaultValue;
    UpdateViews();
}
UpdateViews(); // set initial view

txtAmount.onchange = function () {
    UpdateModel(this.value);
};
chkAmount.onclick = function () {
    if (this.checked) {
        // when user checks the box, only update model if not yet modified
        if (model === defaultValue) UpdateModel(55); // hardcoded default of $55
    } else {
        UpdateModel(defaultValue);
    }
};

<input type='text' id='txtAmount' />
<input type='checkbox' id='chkAmount' />

Answer 3

如果我是你的情况，我会在复选框的点击事件中放置一个 If-Else...

类似：

        if (!String.IsNullOrEmpty(textBox1.Text) | textBox1.Text != "0")
        {
            // Do nothing since textbox1 already has a value greater than zero
        }
        else
        {
            // Enter amount in textbox
        }

Answer 4

试试这个..

function CheckboxDisable(id){

$("#id").attr("disabled", "disabled");
}

function CheckboxEnable(id){
    $("#id").removeAttr("disabled");
}