lundi 20 juillet 2020

Require certain number of checkboxes be checked

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