Change CSS property only in getElementsByName

November 28, 2021

Looking for a way to change the CSS property by certain names.

Down below I have an example using checkboxes. There are two types that are generally the same unless changeSpecialCheckBox() occurs with a true value within its parameter.

file.css

.checkBoxApperance {
    width: 100px;
    height: 50px;
    background: 'dark-blue';
}

file.html

<!--regularCheckBox-->
<div class="checkBoxApperance">
   <input type="checkbox" id="regularCheckBox1" name="regularCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="regularCheckBox2" name="regularCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="regularCheckBox3" name="regularCheckBox"/>
</div>

<!--specialCheckBox-->
<div class="checkBoxApperance">
   <input type="checkbox" id="specialCheckBox1" name="specialCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="specialCheckBox2" name="specialCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="specialCheckBox3" name="specialCheckBox"/>
</div>

file.js

function changeSpecialCheckBox(condition)
{
  if(condition) {
    document.getElementsByName("specialCheckBox").forEach(elem => {
      elem.disabled = true;
      $('.checkBoxApperance').css("background-color" , "light-blue"); //change the appearance
                                                                     //of all checkboxes
                                                                     //instead of all checkboxes under
                                                                     //the "specialCheckBox" name
      });
  }
}

>Solution :

If you are using jQuery to set the style, then you can use $("[name='name']") to select the elements directly instead of combining jQuery with the vanilla JS getElementsByName(). This way you can chain the operations to only apply your changes to the relevant selection of elements, like this:

// You can run this inside the function/condition you want
$("[name='specialCheckBox']") // Selects the elements with the matching name
  .prop("disabled", true) // Sets the disabled property
  .closest(".checkBoxApperance") // Finds the parent div
  .css("background-color", "lightblue") // Applies the new style to the parent

.checkBoxApperance {
  width: 100px;
  height: 50px;
  background: darkblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--regularCheckBox-->
<div class="checkBoxApperance">
  <input type="checkbox" id="regularCheckBox1" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="regularCheckBox2" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="regularCheckBox3" name="regularCheckBox" />
</div>

<!--specialCheckBox-->
<div class="checkBoxApperance">
  <input type="checkbox" id="specialCheckBox1" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="specialCheckBox2" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="specialCheckBox3" name="specialCheckBox" />
</div>