Is there any way to disable a bunch of form elements at once?

Question

I'd like to disable a section of HTML form elements depending on some conditions. This seems to be the ideal way to do that:

<fieldset disabled>
    <input value="one" />
    <input value="two" />
</fieldset>

Now, those two inputs are disabled. However, this seems to be totally borked on IE8. The inputs appear disabled but I can still type in them.

Fiddle (Not as if JsFiddle actually works in IE8)

Is there a cross-browser solution for this problem, without adding disabled to every form element (which would complicate my script). I could probably do something tricky like select the <fieldset> in jQuery, then .each() through all the form elements and disable them - however, I'm actually setting the disabled attribute using a Knockout binding so there's really no place to add such code. My last resort is to use a custom Knockout binding that disables all the children too, but le sigh.

Answer 1

Ok, I've come up with a Knockout.js specific implementation that hopefully will help some other people in the same boat. This solution could probably be adapted for other solutions and platforms with a little effort.

First, I created a Knockout binding:

ko.bindingHandlers.allowEdit = {
   init: function(element, valueAccessor)
   {
      if(!valueAccessor())
      {
         element.disabled = true;
         element.readOnly = true;

         if(element.tagName === 'FIELDSET')
         {
            $(':input', element).attr('disabled', 'disabled');
         }
      }
   }
};

Note, you'd have to implement the update method too if you wanted to allow changes to this binding. I didn't have this requirement.

You could then use the binding as such:

<fieldset data-bind="allowEdit: someExpression">
   <input value="One" />
   <input value="Two" />
</fieldset>

Answer 2

In short: No. The reason behind this is because the lack of support in IE8 and the disabled attribute on the fieldset element.

Source

In IE7 and IE8, the attribute only disables form elements in the < legend >.

I'm afraid you should look for a custom solution like the answers from other users / your own custom binding.