I am trying to turn a class name into a variable so I can then distinguished which checkbox needs to be disable.
I have my MANY checkboxes within multiple divs which are tabs. Each checkbox has an opposite. When they check on the one checkbox, it will disable that checkbox's opposite and vice versa. I have roughly 3 to 20 checkboxes in about 8 divs/tabs, so cannot go by individual classes, take too long. Need to put the existing class that has been checked in a variable and then put it within my Jquery code to disable.
Here is my html:
<!-- Kite Products -->
<div>
<input type="checkbox" class="product_chkKite101" name="product_chk" value=" Like Kite 101 " />
<input type="checkbox" class="product_chkKite102" name="product_chk" value=" Like Kite 102 " />
<input type="checkbox" class="product_chkKite103" name="product_chk" value=" Like Kite 103 " />
</div>
<div>
<input type="checkbox" class="product_chkKite101" name="product_chk" value=" Not Like Kite 101 " />
<input type="checkbox" class="product_chkKite102" name="product_chk" value=" Not Like Kite 102 " />
<input type="checkbox" class="product_chkKite103" name="product_chk" value=" Not Like Kite 103 " />
</div>
<!-- Ball Products -->
<div>
<input type="checkbox" class="product_chkBall101" name="product_chk" value=" Like Ball 101 " />
<input type="checkbox" class="product_chkBall102" name="product_chk" value=" Like Ball 102 " />
<input type="checkbox" class="product_chkBall103" name="product_chk" value=" Like Ball 103 " />
</div>
<div>
<input type="checkbox" class="product_chkBall101" name="product_chk" value=" Not Like Ball 101 " />
<input type="checkbox" class="product_chkBall102" name="product_chk" value=" Not Like Ball 102 " />
<input type="checkbox" class="product_chkBall103" name="product_chk" value=" Not Like Ball 103 " />
</div>
and etc....
I can get an individual product to work. Example:
$('input[name=product_chk]').change(function(){
if($(this).is(':checked'))
$('input.product_chkKite101:not(:checked)').prop('disabled', true);
else
$('input.product_chkKite101:not(:checked)').prop('disabled', false);
});
But cannot seem to get my class to set up in a variable and pop it in the code and say I only want this class checkbox to have one active and rest disable. I tried shaving the code after product_chk, and even putting the product_chk class into a variable. It just doesn't seem to read my index. My Code is below...
$('input[name=product_chk]').change(function(){
var index = this.id.replace('.product_chk','');
//var index = $('input[name=product_chk]').attr('class');
if($(this).is(':checked'))
$('input.product_chk'+index+':not(:checked)').prop('disabled', true);
else
$('input.product_chk'+index+':not(:checked)').prop('disabled', false);
});
I admit, still learning JQuery. Feel like I am missing something. Can anyone help me solve this issue or let me know what can I do to get this to work.
Aucun commentaire:
Enregistrer un commentaire