如何在Internet Explorer中禁用复选框

Question

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

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

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

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

在Internet Explorer中，当用户单击禁用的复选框时，会触发onb​​lur事件，并且复选框在通过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

除了可能引起混淆的用户界面设计（由于对问题的泛化程度过高，无法确定）之外，问题还在于复选框和文本框都是同一模型的 视图 。

• 该模型是美元金额。
• 文本框是实际美元金额的视图 。
• 复选框是一个视图 ，指示金额是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 $55 } else { UpdateModel(defaultValue); } }; 

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

Answer 3

如果您愿意，我会在复选框的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
        }

Answer 4

尝试这个..

function CheckboxDisable(id){

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

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