CODEWITHSUNDEEP
jquery
Codded
Codded

Reputation: 1256

jquery show hide div for multiple checkboxes

I have a script that works when i click all 3 checkboxes it shows/hides 2 different divs.

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" />
<input id="chk3" type="checkbox" />

var chkBoxes = $('#chk1,#chk2,#chk3');

      chkBoxes .change(function(){

      if (chkBoxes.filter(':checked').length == chkBoxes.length){
        $('#checked2').show();
        $('#checked1').hide();
      }else{
        $('#checked2').hide();
        $('#checked1').show();
      }
    });

Does anyone know how to modify this so i can disable the checkboxes as follows:

<input id="chk1" type="checkbox" disabled="disabled" />
<input id="chk2" type="checkbox" disabled="disabled" />
<input id="chk3" type="checkbox" disabled="disabled" />

and have a link for each checkbox to do the change function and tick the checkbox. I'm using:

<a href="" onClick="document.checklist.chk1.value=1;">Link</a>
<a href="" onClick="document.checklist.chk2.value=1;">Link</a>
<a href="" onClick="document.checklist.chk3.value=1;">Link</a>

the above seems to work fine for checking the checkbox, but it does not invoke the jquery change function.

Hope this makes sense, thanks in advance.

Upvotes: 0

Views: 1859

Answers (4)

Mark Coleman
Mark Coleman

Reputation: 40863

You could do something like this to handle your <a/> click.

$("a[rel]").click(function(e) {
    e.preventDefault();
    var chk = $("#" + $(this).attr("rel"))[0];
    chk.checked = !chk.checked;
    chkBoxes.change();
});

With the following markup:

<a href="" rel="chk1">Link 1</a>
<a href="" rel="chk2">Link 2</a>
<a href="" rel="chk3">Link 3</a>

Example on jsfiddle

Upvotes: 0

Ali
Ali

Reputation: 12674

First off I would add "return false" to the end of the onClick method.

Then instead of using pure javascript i would invoke the value change through jQuery. If that doesn't work then try firing the event manually

$("#chk1").trigger("change");

Although if you are using links to check the checkboxes, why bother having the change event on the checkbox? Just put it on the links onClick method.

Something like

<a href=#" onClick="return checkAndToggleDiv($('chk1'));">Link</a>

checkAndToggleDiv(chk){
   chk.prop('checked',true);
   //do anything else you need, you can even use chk.prop('checked') 
   //to get the current value of checked
}

Upvotes: 0

netbrain
netbrain

Reputation: 9304

aye. you need to fire off the checked event on the checkbox.. ill see if i can't manage to produce a jsfiddle example.

http://jsfiddle.net/F7q4Y/

<a href="#" onclick="$('#chk1').trigger('click');">Link1</a>
<a href="#" onClick="$('#chk2').trigger('click');">Link2</a>
<a href="#" onClick="$('#chk3').trigger('click');">Link3</a>

Upvotes: 1

Pehmolelu
Pehmolelu

Reputation: 3564

You can use $(selector).prop('disabled',true); to do the disabled thing.

For clicking the links you could give a class for the link which refers to checkbox id:

$('a').click(function(){
  $('#'+this.className).prop('checked',true);
  return false;
});

Upvotes: 0

Related Questions