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
      });
  }
}

CodePudding user response：

If you are using jQuery, you can use $("[name='name']") to select the elements directly, then chain operations to achieve your goal, 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

In this case you can simply use Node.parentNode to target the parent element of the 'specialCheckBox' elements:

function changeSpecialCheckBox(condition) {
  if (condition) {
    document.getElementsByName('specialCheckBox').forEach(elem => {
      elem.disabled = true;
      elem.parentNode.style.background = 'lightblue'
    })
  }
}

changeSpecialCheckBox(1)

.checkBoxApperance {
  width: 100px;
  height: 30px;
  background-color: darkblue;
}

<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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>