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