MVC get collection of checkboxes when some are not checked

Question

I have a form I am submitting and it has multiple checkboxes. The form is user defined so it has to be able to adapt to any size. I have a collection of "Addons" that I am using. The form displays the addons in checkboxes, with each addon having 4 options. They can select one option on each addon (jQuery to limit one checkox selected) but none are required.

The problem I have is when they submit the form if the first checkbox does not have a checked option than the rest are not passed since it comes in a list/collection How can I make these checkboxes optional and pass the data to my controller?

<h1>Pick Your Extras To Make It More Special</h1>
<fieldset>
    <ul>
        <li>Extra <br /><img src="UPS_30484.jpg" /></li>
        <li><label>One <br /> $1.25<br /> <input type="checkbox" name="Addons[0]" value="1" class="addon-checkboxes"></label></li>
        <li><label>Two <br /> $2.50<br /> <input type="checkbox" name="Addons[0]" value="2" class="addon-checkboxes"></label></li>
        <li><label>Tree <br /> $3.00<br /> <input type="checkbox" name="Addons[0]" value="3" class="addon-checkboxes"></label></li>
        <li><label>Four <br /> $4.00<br /> <input type="checkbox" name="Addons[0]" value="4" class="addon-checkboxes"></label></li>
   </ul>
</fieldset>
<fieldset>
   <ul>
        <li>Extra 2 <br /><img src="UPS_30484.jpg" /></li>
        <li><label>One <br /> $2.50<br /> <input type="checkbox" name="Addons[1]" value="5" class="addon-checkboxes"></label></li>
        <li><label>Two <br /> $5.00<br /> <input type="checkbox" name="Addons[1]" value="6" class="addon-checkboxes"></label></li>
        <li><label>Three <br /> $7.50<br /> <input type="checkbox" name="Addons[1]" value="7" class="addon-checkboxes"></label></li>
        <li><label>Four <br /> $10.00<br /> <input type="checkbox" name="Addons[1]" value="8" class="addon-checkboxes"></label></li>
   </ul>
</fieldset>
<fieldset>
    <ul>
        <li>Candy  <br /><img src="30484.jpg" /></li>
        <li><label>Small<br /> $5.00<br /> <input type="checkbox" name="Addons[2]" value="13" class="addon-checkboxes"></label></li>
        <li><label>Medium<br /> $10.00<br /> <input type="checkbox" name="Addons[2]" value="14" class="addon-checkboxes"></label></li>
        <li><label>Large<br /> $15.00<br /> <input type="checkbox" name="Addons[2]" value="15" class="addon-checkboxes"></label></li>
        <li><label>Bucket<br /> $20.00<br /> <input type="checkbox" name="Addons[2]" value="16" class="addon-checkboxes"></label></li>
   </ul>
</fieldset>

The values on each one represent a price in the database that has a foreign key to the addon product. So I get a list of Addons but when Addons[0] does not have something selected, the Addons[1] and Addons[2] are not submitted either. If all are selected the values do go through to the controller, but I need these to be optional.

Model for the view when submitted:

public class ProductToCartViewModel : BaseObject
  {
    [Required]
    public int Price { get; set; }
    public int[] Addons { get; set; }
    public string DeliveryZipCode { get; set; }
    public DateTime DeliveryDate { get; set; }
    public ApplicationUser User { get; set; }
  }

Use radio buttons - that what they are designed for, and each 'group' can have a default ` null` or `0` option. Or better still design you view model correctly to represent what your want to display in the view and use the strongly typed `HtmlHelper` methods to bind to your model — , Apr 27 '17 at 01:13
With radio buttons, once the user selects an input, they are not able to unselect them. since these are optional I need the user to be able to toggle the selection of the addon. So if there are 4 addons, each addon has 4 options to select from. The issue I also have is that the addon is not going to be something I have been able to strongly type.. as each product has different addons and the user determins what these addons are. So I have an addon object and they can add as many addons as they need to the product. So one product may have 2 addons and one may have 10. — Brandon Turpy, Apr 28 '17 at 23:34
It would not make sense to have a product with 100 addon objects, that is just wasted database columns in Entity. — Brandon Turpy, Apr 28 '17 at 23:35
Then have a additional radio button with a `null` value. And of course you can make it strongly typed (to a collection of `'Addons`) — , Apr 28 '17 at 23:36
And what do you mean _wasted database columns in Entity_ - its a collection, so its a separate database table, not columns in the main table. — , Apr 28 '17 at 23:37

score 0 · Accepted Answer · answered Apr 27 '17 at 00:49

0

I think you should be using radio and not checkbox if users can only select one option out of the 4 options. When you say "if the first checkbox does not have a checked option", do you mean first checkbox of each 4 addons options? or from the group of 3 Extras?

answered Apr 27 '17 at 00:49

user3272413

28
4

I had radio buttons originally but since these are optional once the user selected an addon, they couldn't unselect it. So I switched to checkbox with gave the toggle ability and using JQuery I uncheck all others in group when one in the group is checked. So if there are 4 addons, each addon can have up to 4 options to select from. So they can select 1 option from each of the assigned addons. But they also can select none. I need some way if they do not select a checkbox from the group that the View passes null for that group name otherwise it is messing up the array and no data is sent – Brandon Turpy Apr 28 '17 at 23:40
If you need users to uncheck the radio button, refer to this answer http://stackoverflow.com/questions/10876953/how-to-make-a-radio-button-unchecked-by-clicking-it. It works nicely by holding ctrl and clicking the checked radio button – user3272413 May 06 '17 at 10:19

MVC get collection of checkboxes when some are not checked

1 Answers1