CODEWITHSUNDEEP
htmlasp.net-mvc-3
Sampath
Sampath

Reputation: 65978

Radio button checked property issue

My Html code is as below.But always checked final option button as selected one.How can I fixed this?

<div id="employee" style="margin: 7px 0;">
            <div>
                   <input id="james-johnson" type="radio" name="employee" value="james-johnson" checked="checked"><label for="james-johnson">James Johnson</label>
               </div>
            <div>
                   <input id="boss-hog" type="radio" name="employee" value="boss-hog" checked="unchecked"><label for="boss-hog">Boss Hog</label>
               </div>
            <div>
                   <input id="jake-sanders" type="radio" name="employee" value="jake-sanders" checked="unchecked"><label for="jake-sanders">Jake Sanders</label>
               </div>
            <div>
                   <input id="dawn" type="radio" name="employee" value="dawn" checked="unchecked"><label for="dawn">Dawn</label>
               </div>

        </div>

ASPX Code is as below

<div id="employee" style="margin: 7px 0;">
            <% foreach (var employee in Model.Provider.Employees)
               {  %><div>
                   <input id="<%: employee.Key %>"
                       type="radio" name="employee" value="<%: employee.Key %>" checked="<%:employee.IsEmployeeSelected ?? "unchecked" %>" /><label for="<%: employee.Key  %>"><%: employee.Name%></label>
               </div>
            <% } %>
        </div>

UPDATE (When I applied @Satpal method):

<div id="employee" style="margin: 7px 0;">
            <div>
                   <input id="james-johnson" type="radio" name="employee" value="james-johnson" checked="checked"><label for="james-johnson">James Johnson</label>
               </div>
            <div>
                   <input id="boss-hog" type="radio" name="employee" value="boss-hog" checked=""><label for="boss-hog">Boss Hog</label>
               </div>
            <div>
                   <input id="jake-sanders" type="radio" name="employee" value="jake-sanders" checked=""><label for="jake-sanders">Jake Sanders</label>
               </div>
            <div>
                   <input id="dawn" type="radio" name="employee" value="dawn" checked=""><label for="dawn">Dawn</label>
               </div>

        </div>

Upvotes: 0

Views: 114

Answers (1)

Satpal
Satpal

Reputation: 133453

As The checked attribute is a boolean attribute. When present, it specifies that an element should be pre-selected (checked) when the page loads.

Set checked attribute only if employee is Selected otherwise don't set it

<input id="<%: employee.Key %>"
   type="radio" name="employee" value="<%: employee.Key %>" 
   "<%:employee.IsEmployeeSelected ? "checked" : "" %>" />
   <label for="<%: employee.Key  %>"><%: employee.Name%>
   </label>

Modified Code

"<%: employee.IsEmployeeSelected ? "checked" : "" %>"

Convert employee.IsEmployeeSelected to boolean property

EDIT: As per comment Currentely it's "checked" and null

"<%: !string.IsNullOrEmpty(employee.IsEmployeeSelected) ? employee.IsEmployeeSelected : "" %>"

Or simply set <%:employee.IsEmployeeSelected ?? "" %> like

<input <%:employee.IsEmployeeSelected ?? "" %> />

UPDATE

As OP has updated the field IsEmployeeSelected to boolean

 public bool IsEmployeeSelected { get; set; }

Thus use <%:employee.IsEmployeeSelected ? "checked" : "" %> instead of checked="<%:employee.IsEmployeeSelected ? "checked" : "" %>"

Upvotes: 1

Related Questions