Override fieldset disabled attribute without using Jquery(Only in HTML)

Question

I have a complex form with many <input> elements, most of which I need to disable conditionally (via AngularJS to precise, but this question primarily targets the HTML aspect).

In order to avoid having to set a disabled attribute on every element, I place my inputs into a <fieldset> and set the disabled attribute once. This disables all contained inputs fields.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Fieldsets</title>
</head>

<body>
  <form>
    <fieldset disabled="true">

      <input type="text" placeholder="first">
      <input type="text" placeholder="second">

      <!-- many, many more -->

      <!-- trying to override here -->
      <input type="text" placeholder="last" disabled="false">

    </fieldset>
  </form>
</body>

</html>

Now I need to make a few exceptions and keep some inputs enabled even though the surrounding <fieldset> is disabled. I tried overriding the attribute there by setting disabled="false", but this does not work.

Is there any elegant way to override the disabled attribute?

CSS can't set, or unset, the `disabled` attribute under any circumstances, so no: you'll need to use JavaScript of some flavour to handle this. — David Thomas, Aug 06 '19 at 12:48
This cannot be done in plain HTML or CSS. If you are willing to find a pure js or jquery solution then I can help you. — weegee, Aug 07 '19 at 18:20

Gurkan İlleez · Answer 1 · 2019-08-07T18:17:11.573

$.each($("fieldset[disabled='true']"),function(index,value){
    $(value).removeAttr("disabled");
  $.each($(value).find("input"),function(index,value) {
    if($(value).attr("disabled")){
        $(value).removeAttr("disabled");
    } else {
        $(value).attr("disabled","true");
    }
  })
});

I used Jquery for this solution. i found each fieldset which is set disabled and removed that disabled attribute. Then for each fieldsets that are found, i found the input elements in each fieldset and for each input field that has disabled attribute, i have removed the attribute(disabled). Also i added disabled attribute to the other input fields which are not set with disabled=false attribute.

Also you can check the api for angularjs : https://docs.angularjs.org/api/ng/function/angular.element

"*...without using [jQuery] (Only in HTML),*" also, if that code *had* answered the question then you'd still need to explain how it works, what it does (yes, I can read it, the OP - and other future visitors with similar problems - possibly won't, which reduces the chance of their learning anything useful from it). — David Thomas, Aug 06 '19 at 12:45

Override fieldset disabled attribute without using Jquery(Only in HTML)

1 Answers1