Javascript check button enabled

Enable button when checkboxes selected

I have multiple checkboxes and a submit button that is initially disabled. When checking a box the button is enabled and when unchecking, the button is disabled again. If have multiple checkboxes selected but uncheck one, the button becomes disabled even though I have selected other checkboxes. How can I fix this issue?

6 Answers 6

Implement a counter to track how many are checked, rather than just disabling the button. Add 1 every time a box is checked, and subtract 1 every time a box is unchecked. Once the counter hits 0, disable the button. When it changes to 1, enable the button (if it changes to any higher number it will have already been enabled, so you don’t need to enable it every time). Sample:

Try this where I am basically checking if all the checkboxes are not checked then disable the button.

This is very elegant, although I think it acts not the way the OP wants. Maybe it should be more like disabled = !$(‘.checkbox:checked’).size() ? This way the submit will only be enabled when there is at least one checkbox checked.

You need to check the state of the other boxes each time 1 box is toggled.

You can build an array of every checkbox. Then, loop through testing for checked, and exit the loop on checked (this is what you care about). If you reach the end of the loop and checked for all was false, then disable the button.

This will prevent one uncheck from disabling the button.

You’re currently only checking «this» checkbox rather than all.

This code is Actually works without any error.

var boxcounter; $(function() < let boxcounter = 0; $(".cgv-checkbox").click(function() < if(this.checked) < console.log('checked'); boxcounter++; if(boxcounter == 3)< $("#register_form_Register").removeAttr("disabled"); >> else < boxcounter--; if(boxcounter < 3)< $("#register_form_Register").attr("disabled", "disabled"); >> >); >); 

This will work with multiple checkboxes as well.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Check all checkboxes and enable button

I have a problem checking all the checkboxes and once they’re checked, the button should be disabled. I’m new to JavaScript and it’s really hard for me to understand how I can fix this. Anyone who would know how to fix this would be really a big help for my project. Here’s my code by the way:

    body      All | None Click me .
 
 One
 
 Two
 
 Three
 
 Four
 
  
   

In my code when I check one or more checkboxes the button gets enabled and when there is no checked checkbox the button gets disabled. Now my problem is when I click the All link, it should check all the checkboxes and enable the button and when I click the None it should uncheck the checkboxes and disable the button.

Источник

How to enable button when checkbox clicked in jQuery?

This enables when checked, and disables again if you uncheck. In jQuery .attr(«disabled», bool) takes a boolean, so you can keep this pretty short using the this.checked DOM property of the checkbox.

+1 for the negating the boolean, it’s a simple technique that isn’t used enough, IMO. Oh, and not using .is(«:checked»), too 😉

$("#yourcheckboxid").click(function() < var checked_status = this.checked; if (checked_status == true) < $("#yourbuttonid").removeAttr("disabled"); >else < $("#yourbuttonid").attr("disabled", "disabled"); >>); 

If you are also using Bootstrap with Jquery, «disabled» is not an attribute but a class. So, (and I usually keep my functions on a separate loadable file to keep it clean) do this:

1. Create whatever.js
2. Put this code in it: function seethemagic()
3. Load whatever.js into your html
4. The button can look like this: Show me the magic

This way the button will toggle on and off.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Enable/disable button based on accepting the 2 checkbox conditions

I have gone through the stackoverflow regarding enable/disable button conditionally and was able to find some help but NOT EXACT what I was looking for. Instead of 1 checkbox condition, I have 2 checkbox conditions. So unless if the two checkboxes have been accepted, the button should not be enabled. Following is my html:

function checked(element1, element2) < var myLayer = document.getElementById('acceptbtn'); if (element1.checked == true && element2.checked == true) < myLayer.class = "submit"; myLayer.disabled = ""; >else < myLayer.class = "button:disabled"; myLayer.disabled = "disabled"; >; > 

6 Answers 6

it won’t work because you are not removing that attribute disabled.

function checked(element1, element2) < var myLayer = document.getElementById('acceptbtn'); if (element1.checked == true && element2.checked == true) < myLayer.class = "submit"; myLayer.removeAttribute("disabled"); >else < myLayer.class = "button:disabled"; myLayer.setAttribute("disabled","disabled"); >; > 

1. use any other name then checked as it seems to be reserved and not working.
2. you also need to do getElementById for element1 and element2.

function checkedFunc(element1Id, element2Id) < var myLayer = document.getElementById('acceptbtn'); var element1 = document.getElementById(element1Id); var element2 = document.getElementById(element2Id); if (element1.checked == true && element2.checked == true) < myLayer.class = "submit"; myLayer.removeAttribute("disabled"); >else < myLayer.class = "button:disabled"; myLayer.setAttribute("disabled","disabled"); >; >

@MissMintox Finally got the issue rename function to checked to checkedFunc . Checked seems to be reserved.

You can try the following code

var btn; var changed = function() < //get the length of non checked boxes var disbl = $('input[id^=f_agree]:not(:checked)').length; btn.prop('disabled', disbl);//disable if true, else enable >; $(function() < btn = $('#acceptbtn'); $('input[id^=f_agree]').on('change', changed).trigger('change'); >);

The problem is that there is a difference between the string «f_agree» and the node with id=»f_agree» .

Your code should work as expected with

checked(this, document.getObjectById('f_agree2')) 

Much better would be however to avoid having a widget knowing about the other. I’d implement instead by adding a list of external rules that check all widgets:

This is much easier to read/maintain and also scales better in case you need to add more conditions later. In the onchange of all the widgets just call a function that will enable/disable the submit button depending on the conditions.

Источник