Buscando una forma de cambiar la propiedad CSS por ciertos nombres.
A continuación, tengo un ejemplo usando casillas de verificación. Hay dos tipos que generalmente son iguales a menos que se produzca changeSpecialCheckBox() con un valor verdadero dentro de su parámetro.
archivo.css
.checkBoxApperance { width: 100px; height: 50px; background: 'dark-blue'; }archivo.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>archivo.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 }); } }En este caso, simplemente puede usar Node.parentNode para apuntar al elemento principal de los elementos 'specialCheckBox' :
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>Si usa jQuery para establecer el estilo, puede usar $("[name='name']") para seleccionar los elementos directamente en lugar de combinar jQuery con el JS getElementsByName() . De esta manera, puede encadenar las operaciones para aplicar sus cambios solo a la selección relevante de elementos, así:
// 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> const checkBoxApperanceElemnts = document.getElementsByClassName("checkBoxApperance"); for (var i = 0; i < checkBoxApperanceElemnts.length; i++) { const root = checkBoxApperanceElemnts[i]; const el = root.querySelectorAll('[name="specialCheckBox"]'); if (el[0]) { root.style.background = "red"; } } .checkBoxApperance { width: 100px; height: 50px; background: 'dark-blue'; } <html> <bod> <!--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> <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> </body> </html>