Determining the Checked Status of an Element in Bootstrap and Disabling it if Already Checked

This piece of code is almost perfect, but it's missing a crucial element that I require. Essentially, when the input field has the attribute checked="checked", it should disable the other two elements. If the input is not checked, then the elements should remain enabled.

You can view my current code on jsFiddle here: http://jsfiddle.net/arunpjohny/gMgm7/1/

Below is an example of what my input looks like:

<input class="test_priv1" type="checkbox" name="custom" id="custom" checked="checked" onclick="" />

To sum it up, this scenario would translate to: If the input is checked, disable the other two elements. If the input has the attribute checked="checked", keep the other two elements disabled. When the input is unchecked, enable the two elements again.

javascriptjquerycsstwitter-bootstrap

Answer №1

Managed to get it to work:

$(document).ready(function() {
    if ($('.checkmark').is(':checked')){
         $('.box1, .box2').prop('disabled',true);
    }

    $('.checkmark').change(function () {
        if(this.checked){
             $('.box1, .box2').prop('disabled',true);
        }else{
             $('.box1, .box2').removeAttr('disabled');
        }
    });
});

Check out the live demo here

Answer №2

@Dan was onto something by suggesting to check on ready, but oddly enough, running .checked directly off the element doesn't seem to do the trick. However, using $('.test_priv1').is(':checked') seems to work just fine. Take a look at this fiddle for an example of it functioning both on page load and on change.

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

Node-Red Encountering Problems with Parsing Data

I have successfully set up Node-RED and it is receiving data from multiple PLC systems. Here is an example of the payload: {"d":779,"dt":3,"ts":"2018-04-05T19:54:12.930758Z","q":18} The fields breakdown as follows: d=779 dt=3 ts=2018-04-05T19:54:12.9 ...

javascriptnode-red

Oops, there seems to be a duplicate reference found for the provided id. Any suggestions on how to tackle this alert?

I've been working on a music app, and I've encountered an issue when navigating to the sound-playing page, leaving it, and immediately coming back. The error message that pops up is something I haven't been able to find any information on de ...

javascriptandroidcordova

Tips for transforming strings containing URLs into clickable HTML hyperlinks

Imagine you have the following string: const input = `This is a link: https://www.google.com/, this is another link: https://stackoverflow.com/questions/ask.` How can we parse that string and generate a new string in js with the following format: const ou ...

javascriptnode.js

The 'click' event is not triggering after adding elements to the DOM using AJAX

$(".btn-close").on('click', function () { alert('click'); var win = $(this).closest("div.window"); var winID = win.attr("id"); $(win).find("*").each(function () { var timerid = $(this).attr("data-timer-id"); ...

javascriptjqueryajax

Adjusting the size of an Angular material spinner causes it to malfunction

Here is the code I wrote: <mat-progress-spinner [diameter]="50" mode="indeterminate" ></mat-progress-spinner> When I remove the diameter attribute, the spinner works correctly. However, when I add the diameter attribute, it only appears as a ...

cssangularangular-material

Exploring the loading of stateful data in ReactJS and implementing optimizations

Exploring the world of ReactJS in conjunction with Django Rest Framework (DRF) def MyModel(model): ... status = ChoiceField(['new', 'in progress', 'completed'...]) In my application, I have dedicated sections for eac ...

javascriptpythondjangoreactjsdjango-rest-framework

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

It is widely believed that JavaScript operates on a single-threaded model, but it has the ability to run asynchronously. One intriguing aspect is how this single-threaded model manages non-blocking AJAX requests. Consider a scenario where a non-blocking A ...

javascriptajaxmultithreadingasynchronousevent-loop

Utilizing a random string generator and MySQL for email validation purposes

I recently encountered an issue with my email verification code. I have been attempting to send users a unique passcode ID for login purposes, in addition to their username and password. To generate the passcode, I used a random string key generator: < ...

javascriptphphtmlmysqlforms

Guide on extracting data from an API request in JavaScript and passing it to a React component

I am facing an issue with retrieving the value of an API call in JavaScript for my React component. I have a JavaScript file that successfully calls an API and returns results. However, when I attempt to use the JavaScript function within the useEffect hoo ...

javascriptreactjsfetch-api

Using jQuery, implement a functionality where a line break is added when the Enter key is pressed. Furthermore, the added

I have a text box where users can add cars to a list. Each car is entered on a new line, and when the user presses enter, jQuery adds a \n to move to the next line. However, when I collect this string, the \n characters are "hidden" and cannot b ...

javascriptjquery

Is it possible to verify credit card numbers that contain white spaces using Jquery?

Can someone explain to me how we can validate a credit card number? We currently have a script that accepts numbers like this 4444111122223333 However, I want the credit card validation to allow for credit card numbers in this format (with white spaces. ...

javascriptvalidation

What's the reason behind express-rate-limit not performing as anticipated?

There seems to be an issue with the enforcement of the rate limit I specify in my code. Instead of lasting for 35 minutes as intended, it only lasts for about 20 seconds. Additionally, continuously making requests seems to reset the time limit, which is un ...

javascriptnode.jsexpressexpress-rate-limit

What is the rationale behind not passing $scope to a service in AngularJS, and is it considered bad practice?

Is it advisable not to pass $scope to a service for certain reasons? I understand that services are intended to be reusable singletons, and passing a (potentially) large object to the service could lead to maintenance issues. However, assuming there is so ...

javascriptangularjsangularjs-scope

The download button consistently targets and downloads the initial SVG in my collection. How can I configure it to target each individual SVG for download?

I'm currently working on a QR code app using React. The goal is for users to submit a form with a value, which will then generate an SVG QR code that can be downloaded. However, I'm running into an issue where the same SVG file is being downloade ...

javascriptreactjssvg

Interactive image grid with adjustable description field per image upon selection

My goal is to create a grid of images with a single text field below the grid. This text field should display the description of the image that was last clicked. The grid is implemented using floating divs within a main div, as shown in the code snippet be ...

javascriptjqueryhtmlcss

Why does my progress bar in React not begin on the left side and instead starting in the middle? (See image for reference)

Image Having an issue with the scrolling progress bar that seems to be stuck in the middle and moving in both directions, which doesn't look visually appealing. Can anyone suggest how to resolve this? Interestingly, the same code works fine on online ...

javascripthtmlcssreactjs

Ensuring text is perfectly centered within a div, regardless of its length

In the quest to center text of unknown length within a div, challenges arise. Constraints limit its size to a certain extent, making it unclear whether one or two lines will be needed. As such, traditional methods like line-height are not viable options. A ...

csshtmlpositioning

Images expanding beyond their designated size and overflowing the div

I am trying to use bootstrap in my HTML page to display a list of images. However, I am encountering issues where some images appear larger than others and the last image sometimes goes beyond the boundaries of my main container div. Additionally, when I r ...

htmlcssbootstrap-4

jquery ajax does not receive the returned data

I am working on a jQuery AJAX script $.ajax({ type: "POST", url: "register.php", data: "name=" + name + "&email=" + email + "&password=" + password + "&confirm_password=" + confirm_password + "&captcha=" + captcha, success: ...

javascriptphpjqueryajax