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>