hello Sir
i have a two row and in single row there is a three dropdown and in key month column i have taken div inside td and bind three month with checkboxbut
sir problem is that when i check april month then next row april month also checked again if i check may month then next row may month also check.
@page
@{
ViewData["Title"] = "SalesDetailallocate";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<h2>Sales Unit Allocation</h2>
<div ng-controller="CtrlSalesDetailallocate">
<div class="row">
<div class="col-xs-12 col-sm-12">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="tabbable">
<div>
<div>
<table id="dynamic-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>S.No</th>
<th>Sales Unit</th>
<th class="hide">UserID</th>
<th>Tehsil</th>
<th>Industry</th>
<th>SOLIS Volumes (For financial Year)</th>
<th>MS</th>
<th>Total No of Villages</th>
<th>Total No of Focus Villages</th>
<th>Main Crops</th>
<th>%age of Main crop in Tehsil</th>
<th>Focus Application</th>
<th>Key Months</th>
<th>Key Competitor Model</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in DTunitMaster">
<td>{{$index + 1}}</td>
<td>{{x.SaleUnitName}}</td>
<td class="hide">{{x.TehsilID}}</td>
<td>{{x.TehsilName}}</td>
<td>{{x.Ind}}</td>
<td>{{x.DOJ}}</td>
<td>{{x.DOB}}</td>
<td>{{x.TotalVillage}}</td>
<td>{{x.address}}</td>
<td style="width:50%;">
<select class="col-xs-12" style="height:34px; width:100px;" id="ddlmaincrop1">
@*<option value="0">Select Month </option>*@
<option value="0">Select Main Crop-1</option>
<option ng-repeat="x in DTCrop1" value="{{x.CropId}}">
{{x.CropName}}
</option>
</select>
</td>
<td style="width:50%;">
<select class="col-xs-12" style="height:34px; width:100px;" id="ddlmaincropPer1">
@*<option value="0">Select Month </option>*@
<option value="0">Select Crop Per(%)-1</option>
<option ng-repeat="x in DTCropper1" value="{{x.MainCropId}}">
{{x.CropPercentage}}
</option>
</select>
</td>
<td>
<div class="col-xs-12 col-sm-4">
<div style="width:80px; height:50px; border-color: Black; border-width:1px; border-style:inset; overflow:auto; font-family:Palatino Linotype;
font-size:13.3333px; font-weight: 400; font-style: normal; word-wrap:normal;">
<div ng-repeat="x in DTunitMonth">
<div ng-if="x.MonthID != ''">
<input id="ddlmon1" type="checkbox" ng-model="MonCheckedStatus1[$index]" ng-checked="Monchecked1[$index]" ng-change="MonChange1(x.MonthID, $index)" />
{{x.MonthName}}
</div>
</div>
</div>
<div style="width:80px; height:50px; border-color: Black; border-width:1px; border-style:inset; overflow:auto; font-family:Palatino Linotype;
font-size:13.3333px; font-weight: 400; font-style: normal; word-wrap:normal;">
<div ng-repeat="x in DTunitMonth">
<div ng-if="x.MonthID != ''">
<input id="ddlmon2" type="checkbox" ng-model="MonCheckedStatus2[$index]" ng-checked="Monchecked2[$index]" ng-change="MonChange2(x.MonthID, $index)" />
{{x.MonthName}}
</div>
</div>
</div>
<div style="width:80px; height:50px; border-color: Black; border-width:1px; border-style:inset; overflow:auto; font-family:Palatino Linotype;
font-size:13.3333px; font-weight: 400; font-style: normal; word-wrap:normal;">
<div ng-repeat="x in DTunitMonth">
<div ng-if="x.MonthID != ''">
<input id="ddlmon3" type="checkbox" ng-model="MonCheckedStatus3[$index]" ng-checked="Monchecked3[$index]" ng-change="MonChange3(x.MonthID, $index)" />
{{x.MonthName}}
</div>
</div>
</div>
</div>
</td>
<td style="width:50%;">
<select class="col-xs-12" style="height:34px; width:100px;" id="ddlKcModel1">
<option value="0">Select Key Model-1 </option>
<option ng-repeat="x in DTKeyModel1" value="{{x.ModelId}}">
{{x.ModelName}}
</option>
</select>
<select class="col-xs-12" style="height:34px; width:100px;" id="ddlKcModel2">
<option value="0">Select Key Model-2 </option>
<option ng-repeat="x in DTKeyModel2" value="{{x.ModelId}}">
{{x.ModelName}}
</option>
</select>
<select class="col-xs-12" style="height:34px; width:100px;" id="ddlKcModel3">
<option value="0">Select Key Model-3 </option>
<option ng-repeat="x in DTKeyModel3" value="{{x.ModelId}}">
{{x.ModelName}}
</option>
</select>
</td>
<td><button type="button" class="btn btn-sm btn-primary" id="btn1" ng-click="SaveSaleUnit($index);">SaveSale</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section Scripts {
<script src="~/DeveloperJS/SalesDetail/SalesDetailallocate.JS" asp-append-version="true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="~/css/jquery.multiselect.css" rel="stylesheet" />
<script src="~/ace-master/assets/js/jquery.multiselect.js"></script>
<script type="text/javascript">
$('#btnNext').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$(document).ready(function () {
$("#ddlselectstate").on('change', function () {
$("#ddlselectstate").not(this).prop('checked', false);
});
});
$('select[multiple]').multiselect({
columns: 4,
placeholder: 'Select options'
});
</script>
}
