Customize Radio Button Color in Bootstrap 3 with JQuery

Here is the code for my radio buttons:

<div class="form-group text-danger">
                <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Is a Remix</label>
                <div class="col-md-8">
                    <div class="admin-form theme-primary">
                        <div class="radio-custom radio-primary mt10 mr10 pull-left text-danger">
                            @Html.RadioButtonFor(m => m.IsRemix, true, new { @class = "control-label col-md-4 text-danger" })
                            <label for="IsRemixYes">Yes</label>
                        </div>
                        <div class="radio-custom radio-primary mt10 pull-left text-danger">
                            @Html.RadioButtonFor(m => m.IsRemix, false, new { @class = "control-label col-md-4 text-danger" })
                            <label for="IsRemixNo">No</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Contains Sample</label>
                <div class="col-md-8">
                    <div class="admin-form theme-primary">
                        <div class="radio-custom radio-primary mt10 mr10 pull-left">
                            @Html.RadioButtonFor(m => m.ContainsSample, true, new { @class = "control-label col-md-4 text-danger" })
                            <label for="ContainsSampleYes">Yes</label>
                        </div>
                        <div class="radio-custom radio-primary mt10 pull-left">
                            @Html.RadioButtonFor(m => m.ContainsSample, false, new { @class = "control-label col-md-4 text-danger" })
                            <label for="ContainsSampleNo">No</label>
                        </div>
                    </div>
                </div>
            </div>

        </div>

I attempted to apply a class but it didn't change the color. Since I'm using a specific theme and don't want to modify the CSS, can I use JQuery to achieve this?

This is the CSS I have:

.radio-custom.radio-primary input[type=radio]:checked + label:after,
.radio-custom.radio-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=radio]:checked + label:after {
  background-color: #4ea5e0;
  color: #4ea5e0;
}
.checkbox-custom.fill.checkbox-primary label:before {
  background-color: #4ea5e0;
}

Answer №1

For those looking to utilize jQuery easily, a simple method can be employed. Assuming the checkbox is designed as a pseudo-checkbox to allow for certain styling effects, it may be necessary to carefully select the appropriate selector and styling properties (examining existing CSS and utilizing the browser's inspector tools can assist with this). To alter the appearance, jQuery can be utilized on the webpage:

$(function () {
    $(".radio-custom").css("background-color", "yellow");
});

If there is a need to override CSS that has been declared with the !important designation, a different approach like the following can be taken, which allows for setting a third priority parameter:

$(function () {
    $('.radio-custom').each(function () {
        this.style.setProperty('background-color', 'yellow', 'important');
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When implementing jQuery $.ajax with Angular, the DOM fails to update

Based on the value retrieved from an XHR call to the server, I am looking to display different content: <div class="container"> <div class="header" ng-controller="MyController"> <div ng-switch on="myScopeVar"> <d ...

Issues arise when dealing with the CSS division layout in Internet Explorer 7

Currently in the process of developing a new website and encountering issues with IE7. The first image showcases how it should appear, while the second image depicts how IE7 actually renders it (utilizing IETester to assess older IE versions). The primary ...

JSON format for date and time conversion

Dear Jason, [Serializable] public class MyModel { public int Id {get;set;} public DateTime date {get;set;} } [HttpPost] public ActionResult SchedulesDropdownIndexChanged(MyModel schedule) { objScheduleModel = new ScheduleModel( ...

Interacting with jQuery mouse events on elements below the dragged image

I'm attempting to create a drag-and-drop feature for images using jQuery. While dragging, I generate a thumbnail image that follows the mouse cursor. However, this is causing issues with detecting mouseenter and mouseleave events on the drop target pa ...

Sending a variable to a function within a jQuery AJAX success callback

I'm currently facing an issue trying to preload images using a jQuery AJAX call. The problem arises when attempting to pass a URL string into a function within the success function of the AJAX call. Here's the code I have so far: // Image prelo ...

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

What is the best way to access a variable within an event handler function?

Is there a way to retrieve values from the for-loop within an event handler? Consider this JSON array var items = [ { "id": "#id1", "name": "text1" }, { "id": "#id2", "name": "text2" } ]; that is passed as a parameter to the function function setHand ...

Enhance the flight experience of a helicopter with jQuery game by adding smoother controls

I'm currently experimenting with creating a basic game. In this game, the user controls a helicopter and can fly it up and down. Although I have successfully implemented the basic functionality where holding the screen makes the helicopter ascend an ...

Using the <mark> tag in CSS for creating padding

Struggling to utilize the padding feature in CSS effectively with the HTML below, as it only pads the first word on the left side: The current CSS code I have that's not working correctly: mark { background-color: #89ce40; color: white; opac ...

Angular2: Learn how to dynamically create input fields when a button is clicked

My current challenge involves replicating input fields on click of a button. I have a set of input fields where data can be entered, and then I need to add another set of the same fields for additional data. There needs to be a way to remove these replicat ...

Using jQuery to toggle the visibility of divs depending on the selection of multiple checkboxes

I found this code snippet that I need help with. <div class="row"> <div class="col-xs-4"> <label class="checkbox-inline"><input type="checkbox" value="draft">Draft</label> </div> <div class="c ...

Create an overlay that completely masks the height of a different element

Having a variety of elements on my screen that require overlays, I find myself facing a challenge. These elements come in different sizes and can be resized while the page is active. Although I managed to position overlays using CSS, the issue of 100% hei ...

What is the best way to arrange these elements and a sidebar to achieve this specific layout?

Need help aligning items in CSS to achieve this layout using flexbox. Thank you. | Text A | text B | text C | video | | text d | text E | text F | video | The video is the same in both rows and should extend along the side as a sidebar. ...

Display checkboxes on all TableRow elements as soon as one of them is checked

I've incorporated a material-ui Table into my project and have successfully implemented multi-select functionality. Here are the requirements I've fulfilled so far: Checkboxes are initially hidden - COMPLETED Hovering over a row reveals its che ...

the process of configuring date string for x-axis labels in chartjs

I recently created a time scale chart using chart.js. However, I now want to change the labels in my data array to be in the format of 01-02-2017, 02-06-2017 instead of "4 February 2017", "9 February 2017" and so on. Below is my code: var aR = null; va ...

Expanding section beneath a Row in a Table (Semantic UI React)

I'm attempting to implement expandable Table Rows in a Table that can be activated by clicking on them individually. For instance, upon clicking on the designated area in the provided image below, a Segment or Container will reveal itself with embedd ...

Position a div in the center of a section

Having trouble centering a <div> within a <section>? I've tried setting margin-left and margin-right to auto without success. Any other suggestions? Check out the jsFiddle illustrating the issue: http://jsfiddle.net/veWKh/ ...

Interactive Features in Vue Component

In my Vue Component, I have a prop named src that is bound to a :style attribute like this: <template> <section :class="color" class="hero" :style="{ backgroundImage: src && 'url(' + src + ')' }"> <slot> ...

Implementing a loop in jQuery is not functioning as expected

Can someone help me figure out how to use a for loop to create a jQuery function? I'm having trouble when adding the array parameter in the string, it just doesn't seem to work correctly. Any suggestions? var ids=["width_uncheck","thickness_unch ...

What is the process for saving selected values from a drop-down list into a database?

Hey there, I'm a newcomer to PHP and ajax. When choosing an option from the drop-down list, a separate div function should appear where I need to insert both the selected option and input data in different divs. Sorry for my poor English. Any help fro ...