如何在Internet Explorer中禁用复选框

Question

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

问题来自于他们在文本框中输入一个美元金额，然后单击鼠标选中复选框。这将触发onb​​lur事件，该事件会自动切换复选框，然后识别鼠标单击，将美元金额设置回零。

我的解决方案是禁用文本框焦点上的复选框，然后启用文本框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

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

Answer 2

除了可能令人困惑的用户界面设计（由于您对问题进行了太多概括，因此无法确定），问题是复选框和文本框都是同一视图 >模型

• 型号是美元金额。
• 文本框是视图的 实际金额。
• 复选框是视图，表示 金额是0还是其他。

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

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

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");
}