Get desired html element's attribute value and set to hidden field before binding in Asp.Net MVC

Question

Let's say such hidden field has genereated:

<input data-val="true" 
       data-val-number="The field MemberRelationId must be a number." 
       id="MemberRelationId" 
       name="MemberRelationId" 
       type="hidden" 
       value="3">

As you seem it has a value 3. It means that, user has already set the value for this field. But, he(she) can also change this value and I must send the new value to the action method.

Also, the main point is that, user can select new value by clickind one of these divs:

<div class="collection-container">

    <div class="collection-element selected" data-value="3">
        <span class="icon-check"></span>
        <span>Son</span>
    </div>

    <div class="collection-element " data-value="6">
        <span class="icon-check"></span>
        <span>Father</span>

    </div>

    <div class="collection-element " data-value="8">
        <span class="icon-check"></span>
        <span>Brother</span>
    </div>

</div>

For, now I am manually changing the hidden field value with JQuery after clickin one of these divs

...
$('#MemberRelationId').val($(this).attr("data-value"));
...

But, this way doesn't satisfy me. Is there any better approach in MVC?

What I want to achieve?

I want automatically to get selected div and bind data-value attribute value to MemberRelationId.

Thanks.

Update:

Here is the part from the screenshot:

Answer 1

The clearest solution is to use radio button with style. In fact, your code act as a radio button; the only difference is the icon-check, but you can emulate the same interface with CSS.