Javascript 如何在Internet Explorer中禁用复选框

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

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

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

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

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

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

示例代码：

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

---

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

如果我是您的情况，我会在复选框的单击事件中添加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
        }

---

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

• 模型是美元金额
• 文本框是 实际美元金额
• 该复选框是一个指示 无论金额是

  0

  还是其他

您当前的设计很复杂，这本身并不是一件坏事，因为文本框

onblur

和复选框

onclick

的事件处理程序也是模型的控制器。（这有点过于简化；控制器还包括浏览器和所有JavaScript代码。）

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

var txtmount=document.getElementById（'txtmount'）；
var chkAmount=document.getElementById（'chkAmount'）；
var defaultValue=0；
var模型=默认值；
函数UpdateViews（）{
如果（模型==0）{
chkAmount.checked=false；
}
txtAmount.value=model.toFixed（2）；
}
函数UpdateModel（val）{
//视图更改时更新模型
model=parseFloat（val）| | defaultValue；
UpdateViews（）；
}
UpdateViews（）；//设置初始视图
txtAmount.onchange=函数（）{
UpdateModel（this.value）；
};
chkAmount.onclick=函数（）{
如果（选中此项）{
//当用户选中该框时，仅在尚未修改的情况下更新模型
if（model==defaultValue）UpdateModel（55）；//硬编码默认值$55
}否则{
UpdateModel（默认值）；
}
};

试试这个

function CheckboxDisable(id){

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

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

您可以删除该事件吗？您已经标记了jQuery，所以请看实际的用例是什么？听起来根本原因是一个令人困惑的设计。。。讲英语的人（不能代表他人说话）通常从上到下、从左到右阅读文档和填写表格。在更新文本框的文本框右侧放置复选框似乎有点违反直觉。如果您的用户刚刚在文本框中输入完数据（正在做一些工作），那么如果他们单击了某个会让他们的工作付诸东流并再次默认的东西，他们会很恼火。你能提供一个不太一般的例子吗？（越具体越好）这并不能解决问题。用户可能希望取消选中该复选框以将美元金额更改为零。这将阻止他们这样做。你能解释一下这里发生了什么吗？问题是，我不希望用户必须选中复选框，并且总数的总和是基于那些选中的复选框。我想我可以完全从文本框中的值求和总数，使复选框成为可选的，仅用于选择美元总值或将其设置为零。虽然这看起来不那么直观。这正是你应该添加到你的问题中的特定于问题领域的细节。在这个网站上发布答案的人想帮助你！如果你说得更具体一些，我们将能够更好地帮助你。可能有一种设计模式更适合您所做的事情。你能至少发布一个截图吗？最好发布一些说明您实际操作的标记（HTML），即使这是一个简化的示例。你现在遇到的是一个设计问题，文本框和复选框相互追逐。。
function CheckboxDisable(id){

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

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