Check if checkboxes are check and limit to 2 [VueJS]

Posted 3 weeks ago by theUnforgiven

Hi all,

I have a bunch of checkboxes like this:

  <div class="col-xs-12 col-sm-12 col-md-12"> 
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="UK birth or adoption certificate"> UK birth or adoption certificate<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="Full or provisional UK driving license"> Full or provisional UK driving license<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter from HM Prison"> A letter from HM Prison</li><br/>
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter from a UK government department or Local Authority"> A letter from a UK government department or Local Authority<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter from National Offender Management Service"> A letter from National Offender Management Service<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="Evidence of current or previous service in the UK armed forces"> Evidence of current or previous service in the UK armed forces<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter from a police force confirming that certain documents have been reported stolen"> A letter from a police force confirming that certain documents have been reported stolen<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter from private rented sector access scheme"> A letter from private rented sector access scheme<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter of attestation from an employer">A letter of attestation from an employer<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter from a UK further or higher education institution"> A letter from a UK further or higher education institution<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="A letter of attestation from a UK passport holder working in an acceptable profession"> A letter of attestation from a UK passport holder working in an acceptable profession<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="Benefits Paperwork"> Benefits Paperwork<br />
            <input @change="groupCheckboxes($event)" v-model="groupDoc" type="checkbox" name="group_doc" value="Criminal Record Check"> Criminal Record Check<br />
        </div>

I need to limit the selection 2 and if the user decides to change one for another they can without disabling all of them. How would one achieve this?

Please sign in or create an account to participate in this conversation.