Jump to content

Disable the table row input based on the selection


Recommended Posts

Dear Team,

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

image.thumb.png.476496eca85b97182e935a61583ecd15.png

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.

Link to comment
Share on other sites

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>

image.png.e573e56d7cf1d9f968df6251b6a3b33b.png

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.