Disable custom button group-CodePudding

<div >
   <input  disabled>
   <div ></div>
   <input >
</div>

I like to disable a group of buttons by using the .disabled class on .btngrp. The input's disabled-state is already reserved for custom activities. So it's not possible to use this attribute again for deactivating the inputs. Additionally I have custom buttons of type <div> which do not have an attribute disabled. Changing the .btngrp to a <fieldset> solves the issue only a part because it affects only input elements. The strucutre of the div.btn elements is simplified in the example. These are more complex.

Solution Proposal

Use fieldset instead of div.disabled, style custom buttons div.btn as disabled and prevent pointer-events.

   <style>
    .btngrp:disabled .btn{
        pointer-events: none; /* Disable input */
        opacity: 0.7; /* Style as disabled */
    }
    </style>
    
    <fieldset  disabled>
           <input  disabled>
           <div ></div>
           <input >
    </fieldset>

CodePudding user response：

Can't you just rename your custom class from disabled to customDisabled and assign it to your div like that?

<div >

CodePudding user response：

For <div> based HTML, You need to add following CSS code:

.btngrp.disabled .btn{
  pointer-events: none;
  opacity: 0.7;
}