Checked event doesn't work correctly in firefox

Question

Below code works fine in all browsers except Firefox.

On first click on the checkbox it displays the correct value but in Firefox, it only shows correct value after check box is checked second time.

If I change checked: checked to checked: checked() then after the first click it shows the correct value in Firefox but then enable: doesn't work and it doesn't enable field.

<input type="checkbox"
       data-bind="attr: { id: eId, title: description }, 
                  checked: checked,
                  enable: $root.enableInput, 
                  event: { change: function (newValue) { if (!newValue.checked()) { var TotalValue = !Helper.IsUndefinedOrNull($parent.totalValue()) ? Number($parent.totalValue().toString().replace(/[^0-9\.]+/g, '')) : 0; chargeTypeName() == 'Percentage' ? testChargeAmount(chargeAmountValue() * totalValue) : testChargeAmount(chargeAmountValue()); } } }" />
<label data-bind="text: displayText, attr: { 'for': eId, title: description }"></label>
<input type="text" class="input_text currency"
       data-bind="value: testChargeAmount, precision: 2, attr: { title: description },
                  enable: checked(), css: { eAmountDisabled: !checked()} " />
<input type="text" class="input_text exceptionText"
       data-bind="value: exceptionText, 
                  enable: (checked() && $root.enableInput)" />

Answer 1

The event binding will cancel the default action of the event. If you don't want to cancel the default action, you must return true from the handler function:

event: {
    change: function() {
        ....
        return true;
    }
}

Reference: http://knockoutjs.com/documentation/event-binding.html#note-3-allowing-the-default-action