• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 185
  • Last Modified:

Disable checkboxes using Jquery/Javascript

Hi all,

I have a string of id's returned from an AJAX call in this format:


And I have a load of checkboxes like so:

	<input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="14-229" id="229" >
	<input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="14-35" id="35" >
	<input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="14-45" id="45" >
	<input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="14-78" id="78" >
	<input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="14-85" id="85" >
	<input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="14-92" id="92" >
	<input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="14-24" id="24" >

Open in new window

I'm looking to disable every checkbox that does NOT match with string of id's but not quite sure how to do it.

Could anyone please help me out?

  • 4
  • 3
2 Solutions
Firstly, having numbers as the first character of an id attribute is invalid HTML.  

"Naming rules:
    * Must begin with a letter A-Z or a-z
    * Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
    * In HTML, all values are case-insensitive"
Source: w3schools.com

Regardless, it may still work in jQuery.  How about something like:
var incoming = '5,67,87,45,32,34,46,76,32,45';    // comes back from ajax call
var str = '#' + incoming.replace(/,/g, ', #');
$('input[type=checkbox]').not(str).prop('disabled', true);  
// assuming you're using jQuery 1.6 or better  otherwise use attr()

Open in new window

Have a look here
You may use : $(":checkbox").filter(function() { return !($.inArray($(this).attr("id"), arr)==-1); }).attr("disabled", true);

test page : http://jsfiddle.net/cj89S/
dolythgoeAuthor Commented:
Thanks guys, not sure why you can't use numbers, seems a bit of an odd standard - especially if you need to dynamically generate and identify them.

I suppose I can stick a letter infront of them all!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

dolythgoeAuthor Commented:

How can I ensure the other checkboxes are enabled on the next round of calls to this function?

So I see this disables them:

$(":checkbox").filter(function() { return !($.inArray($(this).attr("id"), arr)==-1); }).attr("disabled", true);

But how would I udate this to say else enable..?

new question, new answer :

$(":checkbox").each(function() {
    if( $.inArray($(this).attr("id"), arr) == -1 ) {
        $(this).attr("disabled", false);
    else {
        $(this).attr("disabled", true);

test page : http://jsfiddle.net/cj89S/1/
dolythgoeAuthor Commented:
Oh sorry, a couple more things if you would be so kind - what does the ":checkbox" mean? Is that every checkbox? Can I specify just the checkboxes between a div?

And if I changed the id values to example: a1, a2, a3, b1, b2, b3 - to make html valid, could I use jQuery in the same fashion as your first query but EXCLUDE running on group 'b' (whatever is defined)?

Ideally, if the data returned was:

a1, b4, b5, b6, c8, c10, c11, d15, d15, d45

I want to always ignore disabling for the group of id's as denoted by the first value (a in this case) - so make sure all 'aXX' id's are enabled but disable the rest based on the code given before. Hopefully that makes sense.
>what does the ":checkbox" mean? Is that every checkbox?

> Can I specify just the checkboxes between a div?
yes :

$(":checkbox", "#your_div_ID")
dolythgoeAuthor Commented:
Thanks so much for your help - I'll ask a seperate question regarding the later.

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now