Disable the table row input based on the selection

[Senthilkumar]

Dear Team,

I have a table which is generating data dynamically. Below is my table

My table code is 

<table id="product_data" class="table table-striped table-bordered nowrap table-sm" style="width:100%;">

				<thead class="bg-blue text-center">
					<tr>
						<th style="width: 5%; vertical-align: middle">S.No</th>
						<th style="width: 25%; vertical-align: middle">Customer Name</th>
						<th style="width: 12%; vertical-align: middle">Location</th>
						<th style="width: 8%; vertical-align: middle">Model</th>
						<th style="width: 8%; vertical-align: middle">Machine S.No</th>
						<th style="width: 10%; vertical-align: middle">Machine Status</th>
						<th style="width: 8%; vertical-align: middle">Monthly (Cu.m) <span class="text-danger">*</span></th>
						<th style="width: 8%; vertical-align: middle">Total (Cu.m)</th>
						<th style="width: 8%; vertical-align: middle">Monthly (Hr.m)</th>
						<th style="width: 8%; vertical-align: middle">Total (Hr.m)</th>
					</tr>
				</thead>
				<tbody>
					<?php

					$n = 1;
					$sql = "select * from machinemaster  AS a INNER JOIN machineassign AS b ON b.RowID = a.id WHERE b.EmpID = '$EmpNo'";
					$result = mysqli_query($conn, $sql);
					while ($row = mysqli_fetch_assoc($result)) {

						$ID = $row['id'];
						$CustomerName = $row['CustomerName'];
						$MachineLocation = $row['MachineLocation'];
						$Model = $row['Model'];
						$MachineNo = $row['MachineSlNo'];
						$RowID = $row['RowID'];
						?>
						<tr>
							<td align='center'>
								<?php echo $n++; ?>
							</td>
							<td>
								<?php echo $CustomerName; ?>
							</td>
							<td>
								<?php echo $MachineLocation; ?>
							</td>
							<td>
								<?php echo $Model; ?>
							</td>
							<td>
								<?php echo $MachineNo; ?>
							</td>
							<td>
								<select name='Ststus[]' id='Status<?php echo $RowID; ?>' class='form-control Status' style="width:auto">
									<option value='1'>Working</option>
									<option value='0'>Not Working</option>
								</select>
							</td>
							<td align='center' hidden>
								<input type="number" name="RowID[]" id="RowID<?php echo $RowID; ?>" value="<?php echo $RowID; ?>" class="form-control" autocomplete="off" />
							</td>
							<td align='center'>
								<input type="number" name="MCubicmeter[]" id="MCubicmeter<?php echo $RowID; ?>" value="" class="form-control MCubicmeter text-center cucalc" autocomplete="off" />
							</td>
							<td align='center'>
								<input type="number" name="TCubicmeter[]" id="TCubicmeter<?php echo $RowID; ?>" value="" class="form-control TCubicmeter text-center " autocomplete="off" readonly />
							</td>
							<td align='center'>
								<input type="number" name="MHourmeter[]" id="MHourmeter<?php echo $RowID; ?>" value="" class="form-control MHourmeter text-center" autocomplete="off" />
							</td>
							<td align='center'>
								<input type="number" name="THourmeter[]" id="THourmeter<?php echo $RowID; ?>" value="" class="form-control THourmeter text-center" autocomplete="off" readonly />
							</td>
							<td hidden>
								<input type="number" name="lang[]" value="<?php echo $RowID; ?>" class="form-control" autocomplete="off" />
							</td>

						</tr>
						<?php
					}

					?>

				</tbody>
</table>

 

In this table, the machine status is a dropdown (Working & Networking). When I select the not working on any row, the Monthly (Cu.m)  & Monthly (Hr.m) columns should disabled.  otherwise, it should be editable.

I have tried the below code. 

<script>
				$(document).on('change', '#product_data tbody tr td:nth-child(6)', function () {
									var rowvlaue = row($(this).closest('tr')).data()[12];
									
									
				});
</script>

Afte this I am not sure how to go ahead. 

Please help me how to complete this.

[Barand]

I find data attributes useful for associating inputs for the same record. I get the data-id of the select field then change other fields with the same data-id.

Here's an example

<php
$employees = [
                [ 'id'=>21, 'name'=>'Curly', 'status'=>1, 'title'=>'Sales Manager', 'salary'=>65000 ],
                [ 'id'=>22, 'name'=>'Larry', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ],
                [ 'id'=>33, 'name'=>'Mo', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ],
                [ 'id'=>46, 'name'=>'Tom', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ],
                [ 'id'=>47, 'name'=>'Dick', 'status'=>1, 'title'=>'Trainee', 'salary'=>25000 ],
                [ 'id'=>51, 'name'=>'Harry', 'status'=>1, 'title'=>'Trainee', 'salary'=>25000 ]
             ];
$tdata = '';
foreach ($employees as $e)   {
    $tdata .= "<tr>
               <td>{$e['name']}</td>
               <td><select name='emp[{$e['id']}][status]' class='status' data-id='{$e['id']}'>" . statusOptions($e['status']) . "</td>
               <td><input type='text' name='emp[{$e['id']}][title]' class='title' data-id='{$e['id']}' value='{$e['title']}'></td> 
               <td><input type='text' name='emp[{$e['id']}][salary]' class='salary' data-id='{$e['id']}' value='{$e['salary']}'></td>
               </tr>"; 
}

function statusOptions($current)
{
    $stats = [1 => "Working", 2 => "Not Working"];
    $opts = "<option value=''>- select status -</option>";
    foreach ($stats as $s => $desc)  {
        $sel = $s == $current ? 'selected' : '';
        $opts .= "<option $sel value='$s'>$desc</option>";
    }
    return $opts;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   <script type='text/javascript'>
       $(function() {
           $(".status").change(function() {
               let id = $(this).data("id")
               if ( $(this).val() == 2 )  {
                   $(".title[data-id="+id+"]").attr("disabled", true)
                   $(".salary[data-id="+id+"]").attr("disabled", true)
               }
               else {
                   $(".title[data-id="+id+"]").attr("disabled", false)
                   $(".salary[data-id="+id+"]").attr("disabled", false)
               }
               
           })
       })
   </script>
   <style type='text/css'>
       table {
           border-collapse: collapse;
           width: 80%;
           margin: 30px auto;
       }
       th {
           text-align: left;
           padding: 8px;
           color: white;
           background-color: black;
       }
       td {
           padding: 4px 8px;
       }
       
   </style> 
</head>
<body>
    <h1>Example</h1>
    <form method='POST'>
    <table border='1'>
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Job Title</th>
            <th>Salary</th>
        </tr>
        <?= $tdata ?>
        <tr><td colspan='4'><input type='submit'></tr>
    </table>
    
    </form>
</body>
</html>