Hide checkboxes on singleSelection: true

[helloscoopa]

When the singleSelection is true, there is no need of showing checkboxes in my opinion because anyways the user can select only one item. so if that prop is true, it should work just like a normal combobox with the lovely typeahead. also, that selected item tag preview is also not appropriate at that point because there will be only one selection so we can show just the selected value instead of as a tag. I really enjoyed this plugin and loved your work @NileshPatel17

Thanks,

ref: selected item tag preview

[exsc185]

Hi, Any idea about this? Also would be great if we can even show radio button circle instead of checkbox.

[helloscoopa]

@exsc185 In my opinion, we don't even need to have radio buttons. because whenever we choose an item from the dropdown list if the singleSelection is true, the dropdown should hide automatically revealing the selected item right because there are no more choices to make. if the user changed his mind, he can open the dropdown again and choose whatever they want. So basically, it should work as a raw HTML <select> tag with added typeahead search functionality when the singleSelection is true.

[exsc185]

@scoopz , yes makes sense. But just from look and feel perspective radio button or just values without checkbox would look better.

[helloscoopa]

@exsc185 yeah, that's what I mentioned. we don't need the checkboxs nor the radio buttons. Just the dropdown with text values would work for single selection. I mean it simplifies the user experience. also as mentioned in the original post, we need to remove the tag view since it doesn't make any sense when there are no multiple. instead need to show the selected value as a whole just like a normal <select> in html.

[exsc185]

@scoopz 100%

[NileshPatel17]

@exsc185 @scoopz This change will be coming up soon.

[Markoniraz]

Hi folks, any new solution about this: "Hide checkboxes on singleSelection"? Thanks in advance @NileshPatel17 ?

[sireeshap]

hi @NileshPatel17 Thanks for nice library. any update above issue. i am also looking for this enhancement.

[himanshumittal90]

you can add below css by adding singleSelection class in your element

.singleSelection .dropdown-list input[type="checkbox"]+div:before { display: none; }

.singleSelection input[type="checkbox"]+div:after { display: none; }

.singleSelection input[type="checkbox"]+div { padding: 6px 10px !important; }

.singleSelection input[type="checkbox"]:checked+div { background-color: #337ab7 !important; color: #fff !important; }