The Story
A group of students went out for an insane trip. There can be any number of groups but the RULES are same for all.
Rules to follow:
- A group can contain only a total of 7 members which includes 5 males (check boxes with value M), 1 female (check box with value F) and one crippled guide (button having disabled property set to it).
- They have to do a 90 on the freeway. That's their task. But only two people can get in the car. Guide ain't gonna ride. He's already crippled. He's just gonna enjoy the ride. He will sit in the side seat. One member (checkbox) from the group should drive the vehicle. It's either going to be a male or a female.
- If no one is willing to participate, the guide will be thrown out of the car(back to disable state).
Car's key is with the lady (checked box is already set as checked).
They took a selfie and here it is.
<div>
Group 1:
<input type="checkbox" id="1g1" name="alpha" value="M" class="onlyone" data-guide="guide1" data-female="6g1" />
<input type="checkbox" id="2g1" name="alpha" value="M" class="onlyone" data-guide="guide1" data-female="6g1" />
<input type="checkbox" id="3g1" name="alpha" value="M" class="onlyone" data-guide="guide1" data-female="6g1" />
<input type="checkbox" id="4g1" name="alpha" value="M" class="onlyone" data-guide="guide1" data-female="6g1" />
<input type="checkbox" id="5g1" name="alpha" value="M" class="onlyone" data-guide="guide1" data-female="6g1" />
<input type="checkbox" id="6g1" name="alpha" value="F" checked="checked" class="onlyone" data-guide="guide1" data-female="6g1" />
<input type="button" id="guide1" name="alpha_guide" value="Guide1" disabled />
</div>
Guide says 'Hey Pals! Listen. Whoever is gonna come with me, enroll yourself now or the ride is over before it begins.' He continues. 'But I ain't gonna ride with this lady standing next to you. I am already disabled. I just don't like the idea of going out with her. So take the key from her (one male checkbox is checked) and get in the car and I will ride with you (button is enabled). I don't care which one of you boys is gonna come. I am gonna love it.'
The entire group is shocked and devastated by what they heard just now. But guide is guide. He can bend the rules.
And the team asks in return 'What if none of us wants to come with you?'
The guide is clever. He says '...then give the key back to the lady (check box with value F has to be checked) and I will go back to where I came from (button is set back to disabled).'
The ride is over.
This is what I am trying to do. If no checkbox is checked, button should be disabled and the checkbox with value F should be checked. I am passing two data attributes. The butotn is enabled/disabled using data-guide
and data-female
for checking that checkbox.
I tried. But failed. Should I write a new event handler? How can I acheive this with the present code?
jQuery:
$('.onlyone').on('change', function()
{
var trigger = false;
$check = $('input[name="' + this.name + '"]').filter(':checkbox');
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
var guide_id = $(this).attr('data-guide');
var female_id = $(this).attr('data-female');
$('#' + guide_id).prop('disabled', trigger || !$check.filter(':checked').length);
});
P.S: I was able to disable the button. Checking the check box didn't go as I planned.
Aucun commentaire:
Enregistrer un commentaire