We Keep Coding

disable radio buttons of a particular column in a table

I have a table of radio buttons as shown in the below picture and if the user checks one radio button then that selected radio button column should be disabled and the user can check only one radio button in a row and for this, I have given the same name to the radio buttons of each row so that user can select only one radio button for a row. now the problem is that I am unable to disable the radio button of the checked column. I have used checked and selected interchangeably. any help is very much appreciated. thank you.
table of radio buttons
<table>
<tr>
<th *ngFor="let heading of columnHeadings[selectedScenario]">
{{heading}}
</th>
</tr>
<tr *ngFor="let i of [0,1,2,3];">
<td *ngFor="let loop of columnHeadings[selectedScenario]">
<input type="radio" name="{{i}}"> Correct
<input type="radio" name="{{i}}"> Partial
</td>
</tr>
</table>

You have to track from which row you are selecting a radio button and then disable it.
HTML:
<table border="1px">
<tr>
<th *ngFor="let heading of columnHeadings[selectedScenario]">
{{heading}}
</th>
</tr>
<tr *ngFor="let i of iterables;">
<td *ngFor="let loop of columnHeadings[selectedScenario]">
<input [disabled]="disabledRows[i]" type="radio" name="{{i}}" (change)="disableRow(i)"> Correct
<input [disabled]="disabledRows[i]" type="radio" name="{{i}}" (change)="disableRow(i)"> Partial
</td>
</tr>
</table>
TypeScript:
selectedScenario: string = "scenario";
iterables = [0,1,2,3];
disabledRows = this.iterables.map(m => false);
columnHeadings = {
scenario: [
"Most Effective Response",
"Second Most Effective Response",
"Trird Most Effective Response",
"Least Effective Response"
]
};
disableRow(index: number) {
this.disabledRows[index] = true;
}
Working solution at Stackblitz.

I suppose that you don't want disable the columns, only need that an option is not selected in the same column, else early you get into a situation when you can not select any value
For this, give values to the radiobuttons and use an array to store the values
values=[]; //declare an empty arrays
<tr *ngFor="let i of [0,1,2,3]">
<td *ngFor="let loop of columnHeadings[selectedScenario];let j=index">
<input type="radio" name="{{i}}" [ngModel]="values[i]"
(ngModelChange)="change($event,i)" [value]="j" > Correct
<input type="radio" name="{{i}}" [ngModel]="values[i]"
(ngModelChange)="change($event,i)" [value]="10+j" > Partial
</td>
</tr>
See that values get the column selected (0,1,2,3) if you select correct and 10 + the column selected if you choose partial (10,11,12,13) (e.g. a value of 12 indicate that you choose the "Trird Most Effective Response partial" and a value of 1 indicate you choose "Second Most Effective Response correct")
The function "change", give value to this.values[index] and loop over "values" making null a value if is in the same column
change(value,index)
{
this.values[index]=value
this.values.forEach((x,i)=>{
if (i!=index && x%10==value%10)
this.values[i]=null
})
}
The stackblitz

Try to add checked disabled to your radios like this:
<input type="radio" checked disabled name="{{i}}">

JavaScript function is failing to clone table row

To give you some context of my situation, In my my code an item can have parts, with these parts the user can harvest, transfer, or dispose of them. For example, a item can have 5 parts. Right now when the user selects a radio box option it will handle all of these parts the same way. So I have created a checkBox option where a user can 'de-select' the "All" option. I then want this to create two identical rows so that the user can have options, for example , transfer 2, harvest 2, dispose of 1.
I have a checkbox that calls my jQuery function that looks like this
I have a checkbox field inside my row that calls my jQuery function when it is clicked, it looks like this
<tr class="tr_clone">
<td>
#part.PartIDLink
</td>
<td>
#Html.DisplayFor(x => x.Parts[i].PartName)
#Html.HiddenFor(x => x.Parts[i].PartName)
</td>
<td style="font-weight:bold">
#Html.DisplayFor(x => x.Parts[i].QtyInItem)
#Html.HiddenFor(x => x.Parts[i].QtyInItem)
</td>
<td>
<input type="checkbox" id="all#(part.ID)" onchange="doalert(this.id, #part.ID)" checked>
</td>
#foreach (var actionType in partActionTypes)
{
<td>
#Html.RadioButtonFor(x => x.Parts[i].SelectedActionType, actionType)
</td>
}
</tr>
And here is my JQuery function
<script>
function doalert(id, rowID) {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('td');
$tr.after($clone);
}
</script>
Here is the rendered HTML
<table class="table">
<tbody>
<tr>
<th>
IGT Part ID
</th>
<th>
Part Name
</th>
<th>
Qty used in Item
</th>
<th>
Move All
</th>
<th style="color:blue">
Transfer
</th>
<th style="color:forestgreen">
Harvest
</th>
<th style="color:red">
Dispose
</th>
</tr>
</tbody>
<tr class="tr_clone" ">
<td>
<a p-id="346 " style="color:#FF00FF; " href="# ">600601</a>
</td>
<td>
Supply - Packing Carton, 9" x 8 " x 8", MU/AX <input id="Parts_0__PartName" name="Parts[0].PartName" type="hidden" value="Supply - Packing Carton, 9" x 8" x 8", MU/AX">
</td>
<td style="font-weight:bold">
1
<input data-val="true" data-val-number="The field QtyInItem must be a number." data-val-required="The QtyInItem field is required." id="Parts_0__QtyInItem" name="Parts[0].QtyInItem" type="hidden" value="1">
</td>
<td>
<input type="checkbox" id="all346" onchange="doalert(this.id,346)" checked="">
</td>
<td>
<input checked="checked" data-val="true" data-val-required="The SelectedActionType field is required." id="Parts_0__SelectedActionType" name="Parts[0].SelectedActionType" type="radio" value="Transfer">
</td>
<td>
<input id="Parts_0__SelectedActionType" name="Parts[0].SelectedActionType" type="radio" value="Harvest">
</td>
<td>
<input id="Parts_0__SelectedActionType" name="Parts[0].SelectedActionType" type="radio" value="Dispose">
</td>
</tr>
But it is not cloning the table row. Why is this? Any help is appreciated

The value of this is the issue, but Guy Incognito's hint doesn't tell the whole story. With jQuery, $(this) usually refers to the event target on a proper event handler. Since you aren't using one, it's null.
Instead of your inline change handler, bind the event in your script like this:
$('.tr_clone input.some-class').change(function() { // where some-class is on the checkbox
let Id = $(this).attr('id');
// set this attribute in your template
let partId = $(this).attr('data-partId');
// ...
}
To pass the value of partId from your template, use a data attribute:
<input type="checkbox" id="all#(part.ID)" data-partId="#(part.ID)" class="some-class">

apply calculations to column in php

Hi I fetching some data from database and constructing the table.
foreach($data_array->LINEDETAILS as $data){
if(empty($data->CREDITEDAMOUNT)){
$data->CREDITEDAMOUNT=0;
}
$linetotal='';
$linetotal = $data->LINEAMOUNT + $data->TAXAMOUNT;
$column='<td>
<input onclick="sum_value(\''.trim($data->LINEAMOUNT).'-'.$data->TAXAMOUNT.'\',this.checked)" type="checkbox" name="checkdata'.$i.'" id="checkdata'.$i.'" value="'.$data->CUSTOMERTRXLINEID.'"style="position: inherit;" checked />
</td>
<td>'.$data->DESCRIPTION.'</td>
<td>'.$data->ORIGINALLINEAMOUNT.'</td>
<td>'.$data->CREDITEDAMOUNT.'</td><td>'.$data->LINEAMOUNT.'<input type="text" value="'.$data->LINEAMOUNT.'" hidden="true"></td>
<td>'.$data->TAXAMOUNT.'</td><td>'.$linetotal.'</td>
<td>
<select>
<option>--</option>
<option>%</option>
<option>Area</option>
<option>Period In Months</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>';
$row .= '<tr>'.$column.'</tr>';
$grandtotal = $grandtotal + $data->LINEAMOUNT + $data->TAXAMOUNT;
$i++;
}
This code returns one to many lines of data.
Each like has a dropdown of 3 value based upon which calculations will be done. If I select as % and Credit value as 80%, the approved line amount should be calculated onblur 80% of Eligible line amount.
I tried to set id's for each elements and do the math using JavaScript it won't calculate and give the result. it gives an error since ID of an element should be unique and since the elements are looped the ID also gets looped. Please help.

Give a try for : "onChange" of the dropdown value and then fetch the % value and calculate in your javascript code and display on the filed that is required, and mark the field as read-only if you want it "not" to be changed.
You can dynamically add id for each element as in the loop.. abd after that fetch all the records till the max value or iteration (say i)

You can add a class on each input field. For eg.
jQuery('.credit_val').change(function(){
var eligible = parseFloat(jQuery(this).parents('tr').find('.eligible_line').text());
var credit = parseFloat(jQuery(this).val());
jQuery(this).parents('tr').find('.approve_amount').val(eligible*credit/100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="eligible_line">1000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
<tr>
<td>
<div class="eligible_line">2000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
</table>

Javascript Addition calculator

enter image description here
how do i create this in html.
when a user enter a value in textbox and click on Addition button then textbox became empty and addition button be disabled. then user enter second value and click on = button that show the result in textbox.

It's really hard to understand what are you exactly want based on question, however I've prepared a basic fiddle for you that should fix your problem or hopefully gives you and idea:
https://jsfiddle.net/Lzg5rfgr/
<table>
<tr>
<td>
<input type="number" id="userNumber">
</td>
</tr>
<tr>
<td>
<button id="plus">+</button>
</td>
<td>
<span id="enteredNumber"></span>
</td>
</tr>
<tr>
<td>=</td>
<td>
<span id="result">0</span>
</td>
</tr>
</table>
javascript using jquery:
$("#plus").on('click', function(){
var num = parseInt($("#userNumber").val()); // get the number
$("#result").html(num + parseInt( $("#result").html()) );
$("#userNumber").val(null); // empty the input box
$("#enteredNumber").html(num);
})

How to know that query come from specific row?

I have a dataTable that each row continue same class and same event.
I have this
<td>
<select name="produits" onchange="loadFourAjax(this)" class="produits">
<option value="0" selected="selected">
<c:forEach var="i" items="${produits}">
<option value="<c:out value="${i.id}" />">
<c:out value="${i.designation}" />
</option>
</c:forEach>
</select>
</td>
<td><select name="fournisseurs" class="fournisseurs"
onchange="loadRefFourAjax(this)">
</select>
</td>
<td class="ref">
</td>
<td class="prix">
</td>
<td>
<input name="qte" class="qte" onkeyup="calculTotalHt(this)" type="text"/>
</td>
<td id="total"></td>
My question how i can know that the query come from a current row of table, because i one to use it to select class prix and qte to calculate prix total of each row.

You are already getting the reference to the current element using this
That is
loadFourAjax(this) or loadRefFourAjax(this)
You can access its parent row node (tr) using
function loadFourAjax(thisObj)
{
//other code
var parentTr = thisObj.parentNode.parentNode;
var prix = parentTr.querySelector(".prix").innerHTML;
}
use querySelector to get the prix value

Please move for loop from <td> level to <tr> level and append id (${i.id} from your code) to fournisseurs name.