I'm using JQM (jQueryMobile) and need to require all check boxes in a group until one is selected, then just require the selected one unless it's the check all then require all.
The problem is I can't use the Id or Name attributes of the check box group, so I'm trying to use the class attribute.
Here is an example of the markup (but the functionality is not working): http://jsfiddle.net/HfLq3/7/
HTML:
<div data-role="page">
<form id="chips_form" name="chips_form" action="#" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:开发者_JS百科</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom chips" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom chips" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom chips" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom chips" />
<label for="checkbox-4a">Sun Chips</label>
<input type="checkbox" name="checkbox-5a" id="checkbox-5a" class="custom chips" />
<label for="checkbox-5a">Select All</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<button type="submit" name="submit" value="chips-submit">Submit</button>
</div>
</form>
</div>
JS:
$(".chips").change(function() {
alert('selected Value(s): '+$(this).val());
});
$('.chips').each(function() {
$(this).attr('required','required');
});
$(".chips").change(function() {
$('.chips').attr('required', $(this).attr("checked") ? '': 'required');
});
$('.chips').attr('required','required');
精彩评论