CODEWITHSUNDEEP
knockout.js
Mahajan344
Mahajan344

Reputation: 2550

radio button name in foreach on knockoutjs

I am working on knockly js template where I have three radio button and these are under foreach loop. So What I am looking for is to give these one name for loop.

But I am having difficulty doing same. Here is my code

<div class="form-horizontal" id="ko-bind-element">
            <input type="hidden" id="serverJSON" value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" />
            <div data-bind="foreach: procedures">
                <div data-bind="template: { name: Mode(), data: $data }"></div>
            </div>
        </div> 

<script type="text/html" id="procedure">
            <table class="table table-bordered" >
                <tr>

                    <td class="col-md-3"><span data-bind="text: Name"></span></td>

                    <td><input type="radio" data-bind="attr: { name: form08 + '$index' },checked: AlreadyCompleted" /></td>
                    <td><input type="radio" data-bind="attr: { name: form08 + '$index' },checked: NotApplicable" /></td>
                    <td><input type="radio" data-bind="attr: { name: form08 + '$index' },checked: CreateNew" /></td>


                </tr>
                <tr>
                    <td colspan="4" style="padding:0;">

                        <div data-bind="if: CreateNew">
                            <textarea style="margin-top:10px; margin-bottom:10px;" class="col-md-offset-3 col-md-8" data-bind=" value : Text"></textarea>
                            <div class="clearfix"></div>
                        </div>
                    </td>
                </tr>
            </table>

        </script>

Now you can see I have tried both ways.

  1. simple name property and assigning $index to that
  2. attr: { name: form08 + '$index' } of data-bind but none of them worked

Upvotes: 0

Views: 1324

Answers (1)

muhihsan
muhihsan

Reputation: 2350

If the expected result from code attr: { name: form08 + '$index' } is something like

  • name="form081"
  • name="form082"
  • ...

Then you should move the quote to the form08 instead. So it will be like this attr: { name: 'form08' + $index }

Also if all the 3 radio buttons are related you should point them to the same observable object, like the sample below

function ViewModel() {
  var self = this;
  self.selectedOption = ko.observable("AlreadyCompleted");
}   

$(document).ready(function () {
  var myViewModel = new ViewModel();
  ko.applyBindings(myViewModel);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>
  <input type="radio" value="AlreadyCompleted" data-bind="checked: selectedOption " />Already Completed
  <input type="radio" value="NotApplicable" data-bind="checked: selectedOption " />Not Applicable
  <input type="radio" value="CreateNew" data-bind="checked: selectedOption " />Create New
</div>
<div data-bind="text: selectedOption"></div>

Upvotes: 1

Related Questions