How do I keep a Checkbox disabled in Internet Explorer

Question

I have an application that pairs a textbox with a checkbox. The user can check the checkbox, which auto-populates the textbox with a specific dollar amount. If they uncheck the checkbox, this sets the textbox's value to zero. They can also enter a dollar amount in the textbox and an onblur event handler toggles the checkbox.

The problem comes when they enter a dollar amount in the textbox and then check the checkbox with a mouse click. This fires the onblur event, which automatically toggles the checkbox, then recognizes the mouse click, setting the dollar amount back to zero.

My solution was to disable the checkbox on textbox focus, then enable the checkbox on textbox onblur event.

This works well in Firefox and Chrome, but fails miserably in Internet Explorer. FF and Chrome ignore any mouse click on the checkbox when it is disabled. This means that the onblur event does not fire, when the user clicks on the disabled checkbox after entering a dollar amount in the textbox. The checkbox stays disabled. They have to click elsewhere on the page for it to be enabled.

In Internet Explorer, the onblur event fires when the user clicks on the disabled checkbox, and the checkbox recognizes the click, right after it is checked with the onblur event handler, unchecking the checkbox, setting the textbox value back to zero.

I need a better solution. How do I get Internet Explorer to act like FF and Chrome, ignoring any click on a disabled checkbox. Or, is there a more elegant solution altogether?

Example Code:

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

Javascript code:

function CheckboxDisable(id){
    document.getElementById(id).disabled = true;
}

function CheckboxEnable(id){
    document.getElementById(id).disabled = false;
}

Answer 1

Short of a real solution. .. you COULD set a data attribute on the check box on focus of the text element, then check for it on the cb on click event and override the default action. ..

Answer 2

Aside from a possibly confusing user interface design (can't say for sure since you genericized the problem too much), the problem is that the checkbox and textbox are both views of the same model .

• The model is the dollar amount.
• The textbox is a view of the actual dollar amount.
• The checkbox is a view that indicates whether the amount is 0 or something else.

Your current design is complex, which is not by itself a bad thing, because the event handlers for the text box onblur and checkbox onclick are also controllers of the model. (This is a bit of an oversimplification; the controller also consists of the browser and all the JavaScript code.)

Here is a solution that helps illustrate this fact. It works based on the business rule that once the user has modified the value in the textbox (to a non-zero value) changing the state of the checkbox from unchecked to checked will not update the model (or the textbox view ).

 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 I were in your case, I will put an If-Else in the click event of the checkbox...

Something like:

        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

Try this..

function CheckboxDisable(id){

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

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