I am displaying many images in a table and asking that users select five of them.
Here is a sample of one table row:
<tr>
<td align="center" style="width: 200px; height: 200px"><input id="Image21_flag" name="flag" style="display: none;" type="checkbox" value="img21"/><label class="middlealign" for="Image21_flag"><img onerror="imgError(this);" src="${URL21}" /></label>
</td>
<td align="center" style="width: 200px; height: 200px"><input id="Image22_flag" name="flag" style="display: none;" type="checkbox" value="img22"/><label class="middlealign" for="Image22_flag"><img onerror="imgError(this);" src="${URL22}" /></label>
</td>
<td align="center" style="width: 200px; height: 200px"><input id="Image23_flag" name="flag" style="display: none;" type="checkbox" value="img23"/><label class="middlealign" for="Image23_flag"><img onerror="imgError(this);" src="${URL23}" /></label>
</td>
<td align="center" style="width: 200px; height: 200px"><input id="Image24_flag" name="flag" style="display: none;" type="checkbox" value="img24"/><label class="middlealign" for="Image24_flag"><img onerror="imgError(this);" src="${URL24}" /></label>
</td>
<td align="center" style="width: 200px; height: 200px"><input id="Image25_flag" name="flag" style="display: none;" type="checkbox" value="img25"/><label class="middlealign" for="Image25_flag"><img onerror="imgError(this);" src="${URL25}" /></label>
</td>
</tr>
And the script I am using to ensure no more than five are selected:
$("input[name=flag]").change(function(){
var max= 5;
if( $("input[name=flag]:checked").length == max ){
$("input[name=flag]").attr('disabled', 'disabled');
$("input[name=flag]:checked").removeAttr('disabled');
}else{
$("input[name=flag]").removeAttr('disabled');
}
How can I require that at least five are selected?
Aucun commentaire:
Enregistrer un commentaire