如何在 Internet Explorer 中禁用复选框

Question

我有一个将文本框与复选框配对的应用程序。用户可以选中该复选框，该复选框会使用特定的美元金额自动填充文本框。如果他们取消选中复选框，这会将文本框的值设置为零。他们还可以在文本框中输入美元金额，然后 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 on click 事件上检查它并覆盖默认操作。 ..

Answer 2

如果我是你的情况，我会在复选框的点击事件中加入一个 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 3

除了可能令人困惑的用户界面设计（不能肯定地说，因为你把问题概括得太笼统了），问题是复选框和文本框都是 views相同的模型.

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

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

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

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 
    } else {
        UpdateModel(defaultValue);
    }
};

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

Answer 4

试试这个..

function CheckboxDisable(id){

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

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

如何在 Internet Explorer 中禁用复选框

How do I keep a Checkbox disabled in Internet Explorer

html

javascript

checkbox

jquery

internet-explorer