Enable/disable a button depending on checkboxes

Question

I am trying since this morning to create a code using jQuery that allows to enable/disable a submit button when I click on a checkbox. I am trying to write all this code inside a function that will be called on everyclick.

The problem is that it works fine on JSFiddle, but on my computer one time the button is enabled I cannot make it disabled again by unchecking all checkboxes.

Do you have any idea to resolve this issue?

Thank you in advence.

This is my code:

function activeBouton() {
  var countChecked = function() {
    var n = $( "input:checked" ).length;
  if (n == 0) jQuery('button').prop('disabled', true);
 else jQuery('button').prop('disabled', false);
  };
  countChecked(); 
  $( "input[type=checkbox]" ).on( "click", countChecked );      
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div onclick="activeBouton()">
  <input type="checkbox" name="nom" value="1" /> Item un
  <input type="checkbox" name="nom" value="2" /> Item deux
  <input type="checkbox" name="nom" value="3" /> Item trois
</div>
<button id="activeBtn" disabled>Add</button>

Which browser is it not working in on your machine? Is this the exact code that you are using on your machine? — Nick Larsen, May 20 '16 at 13:38
if it works in the fiddle and not on your machine, it's probably another piece of code which is faulty — Regis Portalez, May 20 '16 at 13:38
@Lee.Winter, Yea, it works here, but on my computer it doesn't and I don't know where is the problem. — Chinovski, May 20 '16 at 13:40
@NickLarsen, I use Chrome, but even on JSFiddle it doesn't work. It's weird. — Chinovski, May 20 '16 at 13:43
@RifkiAriaGumelar It works on the code snippet, but not on JSFiddle neither on my computer. — Chinovski, May 20 '16 at 13:46
Is it possible that the problem is because of jQuery version? here on the code snippet I used 1.10.2 and on JSFiddle 1.12.2, on my computer 1.8.2 (I'm working on an old project) — Chinovski, May 20 '16 at 13:52
https://jsfiddle.net/6q2bdsfr/2/ - this one is working now, it was only loaded too late. The version could truley make a difference — messerbill, May 20 '16 at 13:56
if jsfiddle is also not working for you on your computer then check whether `javascript` is disabled on your browser — RRR, May 20 '16 at 13:59
he even could not use this platform (SO) if js was disabled... @RRR — messerbill, May 20 '16 at 14:00

brk · Accepted Answer · 2016-05-20T14:07:23.217

2

The snippet you shared is bit confusing. activeBouton function is attached with click handler of the div, which is calling countChecked() & this is also called if there is any change in checkbox

It can be simplified. Beside in there is a major difference between LOAD TYPE like onLoad , onDOMReady,body & head in jsfiddle. So it will be helpful if it is possible to show where you are putting your code when you are running your code in browser

Hope this snippet will be useful

function countChecked() {
  if ($('input[name="nom"]:checked').length > 0 && $("#activeBtn").is(':disabled')) {
        $("#activeBtn").removeAttr('disabled')
    } else if ($('input[name="nom"]:checked').length == 0) {
       $("#activeBtn").attr('disabled', true)
    }
};
$('input[name="nom"]').on("change", function(event) {
    countChecked(); // Call countChecked event on change in checkbox
});

Check this jsfiddle

edited May 20 '16 at 14:07

answered May 20 '16 at 13:57

brk

48,835
10
56
78

It works, I started by trying this method, but my real code contains more than 10000 lines and a lot of function, that's why I try to enable/disable a bouton using function (it means the code you wrote inside a function that I can call after at every click) – Chinovski May 20 '16 at 14:05
It works on JSFiddle, but not on my computer, because as I said, I am trying to put all this code in a function and call it when I click, but it does'nt work at all. Do you know how to put your in a function and call by the next as I did in my first code? – Chinovski May 20 '16 at 14:15
No, in a js file contains other functions. – Chinovski May 20 '16 at 14:24
Ok are you seeing body tag in your html or jsp? – brk May 20 '16 at 14:27
It's a jsp project, and I cannot see any body tag that imports js file. It is an old and complicated project, that's why I try to insert my code in the global js file – Chinovski May 20 '16 at 14:41
Can you try by this code $('body').on("change",'input[name="nom"]',function(event) { countChecked(); }); Make change on in this part , rest leave as it is – brk May 20 '16 at 14:44
Finally, I used anonyme function and it works now, thank you for your help. – Chinovski May 20 '16 at 14:53

Andrew Mairose · Answer 2 · 2016-05-20T13:57:50.167

1

When I attempt to run your fiddle, I get the following error.

Uncaught ReferenceError: activeBouton is not defined.

Not sure why you are trying to bind a click event to the div with an onclick attribute, when you are already binding click events to the individual checkboxes with jQuery.

Try doing it this way instead:

$(document).ready(function() {
  var countChecked = function() {
    var n = $("input:checked").length;
    if (n == 0) jQuery('button').prop('disabled', true);
    else jQuery('button').prop('disabled', false);
  };

  $("input[type=checkbox]").on("click", countChecked);
});

And get rid of the onclick attribute on your surrounding <div>.

Updated fiddle.

edited May 20 '16 at 13:57

answered May 20 '16 at 13:56

Andrew Mairose

10,615
12
60
102

Thank you for your reply, I don't wanna use (document).ready because the real file contains more than 10000 line, and a lot of functions, that's why I wanna call a funtion that contains this method to run those instructions. – Chinovski May 20 '16 at 14:03

Enable/disable a button depending on checkboxes

2 Answers2