I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this.
The label is positioned next to a checkbox, and although I am able to disable the checkbox, I have had trouble applying changes to the label next to it.
The label is coded as follows: Special
My goal is to alter this label when a user clicks on a radio button with the ID "idRadio".
There is a way to achieve what you want without using jQuery or JavaScript.
If you place your <label> tag next to the <input type=checkbox>, you can apply a CSS selector like this:
/* selects the label immediately following a disabled input type=checkbox */
input[type=checkbox]:disabled+label {
/* changes its color to gray */
color: gray;
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function(e) {
var cb = document.getElementById('cb');
cb.disabled = !cb.disabled;
});
});input[type=checkbox]:disabled+label {
color: gray;
}<div>
<input id='cb' type='checkbox' disabled> <label for='cb'>My checkbox</label>
</div>
<div>
<button>Toggle disabled</button>
</div>Updated Solution
In response to your feedback, I have implemented a version using JavaScript to achieve your goal. However, I do not recommend this approach. Nonetheless, here is how it can be done:
document.addEventListener('DOMContentLoaded', function() {
var radios = document.getElementsByName('idRadio');
[].forEach.call(radios, function(radio, i) {
radio.addEventListener('change', function() {
var sp = document.getElementById('idSpecial');
sp.disabled = (this.value === "0");
sp.parentNode.removeChild(sp.nextSibling);
var span = document.createElement('span');
if (sp.disabled) span.style.color = 'gray';
span.textContent = 'Special';
sp.parentNode.insertBefore(span, sp.nextSibling);
});
});
});<input type="checkbox" id="idSpecial" name="Special">Special
<input type="radio" value="1" name="idRadio" checked>Enable</input>
<input type="radio" value="0" name="idRadio">Disable</input>I am struggling to create a timeline with a broken structure on my website. I suspect that the issue lies in using display:inline. When attempting to apply this to my site: https://i.stack.imgur.com/4Ur7k.png the layout gets distorted: https://i.stack.i ...
I need to refresh my collection by deleting all existing documents and then repopulating them with new data from an API call. But when I try running the delete operations first, no new documents are created. Below is a simplified version of my controller ...
Hello, I am looking to modify the background of a page for dark mode. This is the current background styling: $orangeLight:#FFA500!default; $redLight:#FA8072!default; $blueLight:#B0C4DE!default; $greenLight:#90EE90!default; $list2: $blueLight 0%,$blueLi ...
I'm currently attempting to calculate the total of a group of textboxes by utilizing jquery. Each textbox is styled with a class (class1) using bootstrap. To execute the jquery function, I've added an extra class (class2). Below is an example of ...
Hello, I am having trouble disabling future dates on my datepicker. I have tried multiple methods but haven't been successful. Can you please point out where I might be going wrong? <div class="input-group date"> <input type="text" clas ...
I have gone through various forums and discussions regarding this issue, but none of the solutions seem to work for me. For some reason, I am facing difficulties passing props to react-navigation when I attempt to navigate, resulting in the following erro ...
Currently, I am developing a multiplayer game in Angular utilizing the PubNub service along with the presence add-on. One of the challenges I am facing is detecting when a player unexpectedly leaves the game. This is crucial for sending notifications to o ...
I'm aware that by default it doesn't behave this way, but I'm attempting to make it do so. I'm in the process of constructing a button-shaped anchor with a solid box-shadow (no blur) to give the appearance of depth, and upon hovering, ...
For the past few months, I've been diligently working on a project that suddenly hit a snag today. Upon inspecting my website, I noticed that all my button sizes appear to be uniform. I typically use Chrome's developer tools to troubleshoot my we ...
Hey, I'm facing an issue with using borders in list items. I wanted to add borders to all the elements in the <li>, but when the width of the <li> exceeds the window's width, the right side border disappears. How can I resolve this ...
I've been working on a project involving authentication using Django backend and Next.js frontend. For state management, I'm utilizing Redux Toolkit. However, I've encountered an issue with the Next.js API that communicates data to the backe ...
I currently have functioning jQuery code on my website. (function ($) { $(document).ready(function(){ if (!$('.normal').length) { $('#special').addClass("yellowstone"); } }); }(jQuery)); The "normal" selector is only loaded w ...
I am facing an issue where I need to resolve a promise in a state provider so that I can use the results of the promise in another promise. I am a bit unsure about how to go about this. I tried the following approach: app .config(['$stateProvid ...
&cellphone=0400000000¬es=this+is+a+test The mistake is visible above You'll notice that the following error has occurred ¬es It was actually supposed to be ¬es= I'm curious why this happened. Below is the HTML form: <!---lef ...
Having issues implementing loaders in React-Router V6 while making a request for a page through a function located in the context file. Unfortunately, I can't access the context from main.js where the router is defined. Main.js import ReactDOM from & ...
In my quest to fetch data from another server, I am using the curl_setopt PHP function along with Ajax. The function I have created seems to be working fine, but sometimes when I refresh the page and the internet connection is slow, I don't receive an ...
After creating an Angular app to display a hierarchy, I am now attempting to add a text box on top of the hierarchy for data filtering purposes. Despite trying various filter examples, I have not achieved much success. My goal is to implement Angular bind ...
I can't seem to find the element with the specified class name. Here's a snippet of the HTML code: <a class="j-js-stream-options j-homenav-options jive-icon-med jive-icon-gear" title="Stream options" href="#"></a> I attempted to gen ...
I am facing a requirement to customize the colors of ribbon styles instead of using the default ones. After researching pattern matching in CSS, I attempted the following code, but it did not work: This is my original CSS: .ms-cui-cg-**tl** .ms-cui-ct-f ...
Is there a way to add the result value to an already existing value in a specific textbox? I've noticed that concatenation is working, but addition is not. $.post('includes/ajax_timesheet.php', { 'action': 'add_kitamount&ap ...