IE浏览器中基于单选框条件禁用textarea的异常问题

It looks like you're hitting an IE-specific quirk where Knockout's enable binding on a <fieldset> doesn't properly disable child elements (like your <textarea>) as expected. IE handles the disabled state of <fieldset> elements differently than modern browsers—while other browsers automatically disable all child form controls when the fieldset is disabled, IE doesn't propagate this behavior reliably.

Here are a few straightforward fixes to resolve this:

1. Move the enable Binding Directly to the Textarea #

The simplest and most reliable fix is to apply the enable condition directly to the <textarea> instead of wrapping it in a disabled fieldset. This bypasses IE's inconsistent handling of fieldset disabled states entirely.

Modify your textarea's data-bind attribute to include the enable check:

<textarea style="width:90%; " id="lendingArea" maxlength="8000" 
  data-bind="
    css: lendingAreaCSS, 
    attr: { title: lendingAreaToolTip }, 
    event: {focusout: checkLostFocus.bind($root, $data, 'lendingArea')}, 
    value: lendingArea,
    enable: lendingAreaDifferent() === 'Y: Yes'
"></textarea>

You can then remove the data-bind="enable: ..." from the parent <fieldset> since the textarea now controls its own enabled state directly.

2. Use a Custom Knockout Binding for Fieldset Compatibility #

If you prefer to keep the binding on the fieldset (for example, to disable multiple child controls at once), create a custom binding that manually disables/enables all form elements inside the fieldset—this works consistently across IE and modern browsers.

Add this custom binding to your JavaScript:

ko.bindingHandlers.enableFieldset = {
    update: function(element, valueAccessor) {
        var isEnabled = ko.unwrap(valueAccessor());
        // Target all form controls inside the fieldset
        var formControls = element.querySelectorAll('input, textarea, select, button');
        
        // Loop through each control and set its disabled state
        Array.prototype.forEach.call(formControls, function(control) {
            control.disabled = !isEnabled;
        });
        
        // Set the fieldset's own disabled attribute for consistency in other browsers
        element.disabled = !isEnabled;
    }
};

Then update your fieldset's data-bind to use this custom binding instead of the default enable:

<fieldset class="form-horizontal radiogroup" style="margin-left: -15px" 
  data-bind="enableFieldset: lendingAreaDifferent() === 'Y: Yes'">

3. Verify Your Knockout Version #

If you're using an older version of Knockout, it might have known compatibility issues with IE's DOM handling. Ensure you're using a version that supports IE (Knockout 3.5.x is the last major version with IE support) and that you've included any necessary polyfills (like Array.prototype.forEach if you're targeting very old IE versions).

内容的提问来源于stack exchange，提问作者Tr Ex