Set items disabled based on type

by Plippie Plop

HTML

<div>
<input name="d01" data-drvtn-method="a" type="text" value="A">
<input name="d02" data-drvtn-method="b" type="text" value="B">
<input name="d03" data-drvtn-method="c" type="text" value="C">
<input name="d04" data-drvtn-method="d" type="text" value="D">
<input name="d05" data-drvtn-method="e" type="text" value="E">
<input name="d05" data-drvtn-method="F" type="text" value="F" readonly>

</div>

CSS

div{
  display:flex;
  flex-direction:column;
}
input{
  padding:0.2rem;
  margin:0.2rem 0;
}
input.disabled{
  border:2px solid red;
}
input.enabled{
  border:2px solid green;
}

input:read-only{
  border:2px solid lightgrey;
}

JavaScript

const disabledElements = ['a', 'c', 'e'];
 const enabledElements = ['b', 'd'];


 // jQuery
 $('input').each(function() {
   let elm = $(this);
   let setDisabled = elm.data('drvtn-method');
   disableField = false;

   if (disabledElements.includes(setDisabled)) {
     $(this).prop('disabled', true).addClass('disabled');
   }

 });


 // native:
 const elms = document.querySelectorAll("input");

 elms.forEach(el => {

   let setEnabled = el.dataset.drvtnMethod
   let enabled = false;

   if (enabledElements.includes(setEnabled)) {
     el.classList.add("enabled");
   }
   
 });