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:

    <         


        

Answer 1

Give the id to your fieldset tag(or u can also use tag name directly in jquery code) & use following code to make all the fields disable in that fieldset using jquery.

$("#fieldset id" or "fieldset").children().attr("disabled", "disabled");

Answer 2

Solution using jQuery:

var disabledFiedset=$('fieldset[disabled]');
$('input',disabledFiedset).attr('disabled','disabled');

Answer 3

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.

Answer 4

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 5

I was able to do something similar using an observable in my model called editable and then in my input I used a data-bind="enable: editable” and this totally works in IE 7, 8 and 9.