Disabling font-awesome checkboxes

As someone who is new to front-end technologies, I am trying to achieve the following. Despite my efforts to find a solution, I have not been successful so far. Here is the issue I am facing-- I have two master checkboxes labeled 1) I do not like numbers 2) I do not like alphabets (both are styled using font-awesome checkboxes)

<div class="x-form-cb-li select-option2">
<input type="checkbox" name="brands" id="no-brand" style="display: none;">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none; color:#228B22;"></i>
<label id="label-numbers" for="none" class="x-form-cb-label">I do not like numbers</label>
<label id="label-alphabets" for="none" class="x-form-cb-label">I do not like alphabets</label>

We have five checkboxes labeled 1, 2, 3, 4 and 5. When the checkbox with label id="label-numbers" is checked, these five checkboxes become disabled. Similarly, we have five checkboxes labeled a, b, c, d and e. When the checkbox with label id="label-alphabets" is checked, these five checkboxes become disabled. All of these checkboxes should use font-awesome icons. I was successful in achieving this with normal checkboxes, but I am facing a challenge with font-awesome checkboxes.

Edit: I am seeking assistance with the code from someone. Here is the link: https://jsfiddle.net/ankit1191/wb4snfm6/45/ When the checkbox 'I do not like numbers' is checked, checkbox '1' becomes disabled. When unchecked, checkbox '1' returns to its normal state.

Answer №1

Utilize the bootstrap class disabled within a div that has the class

x-form-cb-li select-option2 disabled
. It seems like you are attempting to disable something using bootstrap. Make sure to verify the availability of the disable class in bootstrap.

<div class="x-form-cb-li select-option2 disabled">
<input type="checkbox" name="brands" id="no-brand" style="display: none;">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none; color:#228B22;"></i>
<label id="label-numbers" for="none" class="x-form-cb-label">I do not like numbers</label>
<label id="label-alphabets" for="none" class="x-form-cb-label">I do not like alphabets</label>

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

Is there a way to pass a variable from a Django view to an HTML page using Ajax when the user presses a key

I am developing an application that delivers real-time data to users in HTML, and I aim to dynamically update the paragraph tag every time a user releases a key. Here is a snippet of my HTML: <form method="POST"> {% csrf_token %} <p id="amount_w ...

Experiencing a 400 error while transitioning from ajax to $http?

I am facing an issue while trying to make a GET request using $http instead of ajax. The call functions perfectly with ajax, but when attempting the same with $http, I encounter a 400 (Bad Request) error. I have referenced the Angular documentation and bel ...

Ways to retrieve all elements based on their class names?

What is the equivalent of using $('.class') in JQuery to get all elements by class name with pure JavaScript? ...

The toggle feature in jQuery doesn't hide content in the same manner as it was originally shown

Just diving into the world of jquery and I'm experimenting with the toggle function to display and hide a div, along with adding or removing an active class. http://jsfiddle.net/MAkyw/ I've encountered 2 issues: 1) The 'active' class ...

React Jodit Editor experiencing focus loss with onchange event and useMemo functionality not functioning properly

I'm currently working on a component that includes a form with various inputs and a text editor, specifically Jodit. One issue I've encountered is that when there are changes in the Jodit editor's content, I need to retrieve the new HTML va ...

Can you explain the error message "a.split is not a function" in an Angular context?

My Angular application is encountering an error upon page load. The error message displayed is as follows: angular-amin.js:122 TypeError: a.split is not a function at r (angular-amin.js:186) at m.$digest (angular-amin.js:145) at m.$apply (angular-ami ...

Improving Visibility in AngularJS

I am new to using Angular and encountering a simple issue. I have a button that, when clicked, should reveal a grid and some hidden filters. The filters are structured like this: <div ng-show="filtroFilial" style="visibility: hidden" class="col-md-2"&g ...

trouble with fetching data

Within my Backbone view, I have the following code snippet: var BookView = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { this.model.fetch({ success : function(model, resp, opt) { alert(this.$el. ...

Creating unique CSS div designs based on the nth-child selector

I have created a website layout. https://i.stack.imgur.com/6FSEb.png I have included the file showing the design. The data in the boxes will come from a MySQL database. My query is, can it be done with just one query? Currently, I am running separate q ...

AngularJS selector, offering similar functionality to jQuery

There are 3 div elements with the same class in an HTML code snippet: <div class="hide"> </div> <div class="hide"> </div> <div class="hide"> </div> In jQuery, all the div elements can be hidden with a single code sta ...

Ajax calls for validations are failing to trigger a response from PHP

I am currently working on validating my signup form using PHP and AJAX, but unfortunately, I am not receiving any response value. Below is the AJAX code snippet I am using: <script type="text/JavaScript"> function frmValidation(str) { ...

jQuery receiving improperly formatted HTML from method call

One issue I am facing involves a jQuery Ajax method that anticipates receiving HTML as the return. The JavaScript function's URL leads to a JsonResult method within ASP.NET MVC. To construct the HTML, I am utilizing StringBuilder and checking it in Vi ...

Angular.js enables seamless synchronization between contenteditable elements and the $scope object by automatically updating the

I'm completely new to Angular.js and have been exploring various tutorials to grasp the concept of two-way binding with contenteditable elements within an ng-repeat. Currently, I am utilizing a shared 'store' between controllers like this: ...

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

I've exhausted all available questions on this topic and attempted every solution, but my keyup function remains unresponsive. $(document).ready(function() { $(document).on('keyup', '.pollOption', function() { var empty = ...

Increasing Taxes and Boosting the Overall Cost

How can we set up a system where taxes are bypassed by default unless otherwise specified when placing an order? Let's take a look at the following text box: <input class="txt1" type="text" name="subtotal" value="" id="subtotal" size="16" ta ...

A more organized method for assigning Enter key presses

function onLoad() { eworkData.FieldByName('SearchReference').HTMLfield.onkeydown=function(evt) { var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if( keyCode == 13 ) { eworkDat ...

Achieving effective targeting of the second segment within a string enclosed in a span tag through increased specificity

When it comes to styling elements, the easiest way is to use classes and assign the properties needed. However, 1. I'm not a huge fan of creating classes all over the place. That's what specificity and CSS mapping are for. 2. Going thro ...

Attempting to toggle variable to true upon click, but encountering unexpected behavior

On my webpage, I have implemented a simple tab system that is only displayed when the variable disable_function is set to false. However, I am facing an issue with setting disable_function to true at the end of the page using a trigger. When this trigger ...

Unexpected absence of Aria tags noticed

I've been working on integrating ngAria into my project. I have injected it into my module and created the following HTML: First Name: <input role="textbox" type="text" ng-model="firstName" aria-label="First Name" required><br> Employee: ...

Verify if the expression can be found in the DIV element's style

Recently, I encountered a situation where a DIV contains a background image that is either set directly or generated as an SVG. I needed to figure out how to determine when the DIV contains the SVG-string. Here are my two DIVs: <div class="cover m ...