title: Show/Hide text boxes in a <TABLE> based on radio button selection in a particular row
body: <p>Please refer to the enclosed code for understanding. HTML Table is displayed with elements based on certain criteria. Whenever radio button in "Extra KM/Hr?" is Yes, then all columns onto its right hand side should be enabled, else disabled. I am populating the table values using PHP on this "displayTable" id.</p>
  
  <pre><code>    &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;!-- Meta tags --&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
          &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="author" content=""&gt;
  
          &lt;!-- Title --&gt;
          &lt;title&gt;Cab Tracker&lt;/title&gt;
  
          &lt;script type="text/javascript"&gt;
              function getRoutes(){ 
                  $(document).ready(function(){
                      $("#compName").change(function(){
                          var cID = $("#compName").val();
                          $.ajax({
                              type: "POST",
                              url: "loadTariff.php",
                              data:'companyID='+cID
                              }).done(function(data){
                              $("#displayTable").html(data);
                          });
                      });
                  });
              }
          &lt;/script&gt;
  
          &lt;link rel="shortcut icon" type="image/png" href=""&gt;
  
          &lt;link rel="stylesheet" href="main/vendor/bootstrap4/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/themify-icons/themify-icons.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/font-awesome/css/font-awesome.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/animate.css/animate.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/jscrollpane/jquery.jscrollpane.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/waves/waves.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/switchery/dist/switchery.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/DataTables/css/dataTables.bootstrap4.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/DataTables/Responsive/css/responsive.bootstrap4.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/DataTables/Buttons/css/buttons.dataTables.min.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/DataTables/Buttons/css/buttons.bootstrap4.min.css"&gt;
          &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css"&gt;
          &lt;link rel="stylesheet" href="main/vendor/dropify/dist/css/dropify.min.css"&gt;
          &lt;link rel="stylesheet" href="main/assets/css/core.css"&gt;
  
          &lt;style type="text/css"&gt;
              .rating-outer span,
              .rating-symbol-background {
                  color: #ffe000!important;
              }
              .rating-outer span,
              .rating-symbol-foreground {
                  color: #ffe000!important;
              }
          &lt;/style&gt;
          &lt;link rel="stylesheet" href="main/vendor/jvectormap/jquery-jvectormap-2.0.3.css"&gt;
      &lt;/head&gt;
      &lt;body class="fixed-sidebar fixed-header content-appear skin-default"&gt;
  
          &lt;div class="wrapper"&gt;
              &lt;div class="preloader"&gt;&lt;/div&gt;
              &lt;div class="site-overlay"&gt;&lt;/div&gt;
              &lt;div class="site-sidebar"&gt;
                  &lt;div class="custom-scroll custom-scroll-light"&gt;
                      &lt;ul class="sidebar-menu"&gt;
                          &lt;li class="with-sub"&gt;
                              &lt;a href="#" class="waves-effect  waves-light"&gt;
                                  &lt;span class="s-caret"&gt;&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;span class="s-icon"&gt;&lt;i class="ti-crown"&gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;span class="s-text"&gt;Company&lt;/span&gt;
                              &lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="listcompanies.php"&gt;List Company&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="addcompany.php"&gt;Add New Company&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="site-header"&gt;
                  &lt;nav class="navbar navbar-light"&gt;
                      &lt;div class="navbar-left"&gt;
                          &lt;a class="navbar-brand" href=""&gt;
                              &lt;div class="logo" style="background: url(/logo-black.png) no-repeat;"&gt;&lt;/div&gt;
                          &lt;/a&gt;
                          &lt;div class="toggle-button dark sidebar-toggle-first float-xs-left hidden-md-up"&gt;
                              &lt;span class="hamburger"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="toggle-button-second dark float-xs-right hidden-md-up"&gt;
                              &lt;i class="ti-arrow-left"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="toggle-button dark float-xs-right hidden-md-up" data-toggle="collapse" data-target="#collapse-1"&gt;
                              &lt;span class="more"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="navbar-right navbar-toggleable-sm collapse" id="collapse-1"&gt;
                          &lt;div class="toggle-button light sidebar-toggle-second float-xs-left hidden-sm-down"&gt;
                              &lt;span class="hamburger"&gt;&lt;/span&gt;
                          &lt;/div&gt;
  
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="nav-item hidden-sm-down"&gt;
                                  &lt;a class="nav-link toggle-fullscreen" href="#"&gt;
                                      &lt;i class="ti-fullscreen"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;ul class="nav navbar-nav float-md-right"&gt;
                              &lt;li class="nav-item dropdown hidden-sm-down"&gt;
                                  &lt;a href="#" data-toggle="dropdown" aria-expanded="false"&gt;
                                      &lt;span class="avatar box-32"&gt;
                                          &lt;img src="main/avatar.jpg" alt=""&gt;
                                      &lt;/span&gt;
                                  &lt;/a&gt;
                                  &lt;div class="dropdown-menu dropdown-menu-right animated fadeInUp"&gt;
                                      &lt;a class="dropdown-item" href=""&gt;
                                          &lt;i class="ti-user mr-0-5"&gt;&lt;/i&gt; Profile
                                      &lt;/a&gt;
                                      &lt;a class="dropdown-item" href=""&gt;
                                          &lt;i class="ti-settings mr-0-5"&gt;&lt;/i&gt; Change Password
                                      &lt;/a&gt;
                                      &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                      &lt;a href="logout.php" name="submit" class="dropdown-item"&gt;
                                          &lt;span class="s-icon"&gt;&lt;i class="ti-power-off"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;span class="s-text"&gt;Sign Out&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
              &lt;div class="site-content"&gt;
                  &lt;div class="content-area py-1"&gt;
                      &lt;div class="container-fluid"&gt;
                          &lt;form class="form-horizontal" name="tariffset" action="settariff.php" method="POST" enctype="multipart/form-data" role="form" onsubmit="return validateform()"&gt; 
                              &lt;div class="box box-block bg-white"&gt;
                                  &lt;div class="row" &gt;
                                      &lt;div class="col-md-3" style="width:15%"&gt;
                                          &lt;label&gt;Company:&lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-md-6" style="width:80%"&gt;
                                          &lt;?php
                                              require_once "config.php";
  
                                              $sqll = "select companyID,companyName from companymst where delFlag=0 order by companyName";
  
                                              $results = mysqli_query($conn, $sqll);
  
                                              if (mysqli_num_rows($results) &gt; 0) 
                                              {
                                                      while ( $row = mysqli_fetch_array ($results,MYSQLI_ASSOC));
  
                                              }
                                          ?&gt;                      
                                          &lt;select id="compName" name="compName" class="form-control" style="width:100%;" required onChange="getRoutes();"&gt;
                                              &lt;option selected value=-1&gt;Select Company&lt;/option&gt;
                                              &lt;?php
                                                  if (mysqli_num_rows($results) &gt;0)
                                                  {
                                                      foreach ($results as $row){
                                                          echo "&lt;option value=$row[companyID]&gt;$row[companyName]&lt;/option&gt;";         
                                                      }
                                                  }
                                              ?&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;br/&gt;
                                  &lt;hr style="height: 2px;background: black; " &gt;
                                  &lt;table id="editableTable" class="table table-bordered" &gt;
                                      &lt;thead style="text-align:center"&gt;
                                          &lt;tr&gt;
                                              &lt;th width='15%'&gt;&lt;span&gt;Route&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='20%'&gt;&lt;span&gt;Pickup/Drop&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='10%'&gt;&lt;span&gt;# Days&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='10%'&gt;&lt;span&gt;Total Amount&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='20%'&gt;&lt;span&gt;Extra KM/Hr?&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='10%'&gt;&lt;span&gt;Allowed KM&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='10%'&gt;&lt;span&gt;Allowed Hr&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='10%'&gt;&lt;span&gt;Extra KM Rate&lt;/span&gt;&lt;/th&gt;
                                              &lt;th width='10%'&gt;&lt;span&gt;Extra Hourly Rate&lt;/span&gt;&lt;/th&gt;                     
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody id="displayTable"&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                                  &lt;hr style="height: 2px;background: black; " &gt;               
                                  &lt;br/&gt;
                                  &lt;div class="row"&gt;
                                      &lt;input type="submit" class="btn btn-primary" value="Submit" name="submit"&gt;
                                  &lt;/div&gt;              
                              &lt;/div&gt;
                          &lt;/form&gt;         
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;footer class="footer"&gt;
                      &lt;div class="container-fluid"&gt;
                          &lt;div class="row text-xs-center"&gt;
                              &lt;div class="col-sm-4 text-sm-left mb-0-5 mb-sm-0"&gt;
                                  &lt;p&gt;© 2020 S10Cabs&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/footer&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript" src="main/vendor/jquery/jquery-1.12.3.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/tether/js/tether.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/bootstrap4/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/detectmobilebrowser/detectmobilebrowser.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/jscrollpane/jquery.mousewheel.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/jscrollpane/mwheelIntent.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/jscrollpane/jquery.jscrollpane.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/jquery-fullscreen-plugin/jquery.fullscreen-min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/waves/waves.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/js/dataTables.bootstrap4.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/Responsive/js/dataTables.responsive.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/Responsive/js/responsive.bootstrap4.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/Buttons/js/dataTables.buttons.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.bootstrap4.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/JSZip/jszip.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/pdfmake/build/pdfmake.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/pdfmake/build/vfs_fonts.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.html5.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.print.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.colVis.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="main/vendor/switchery/dist/switchery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/vendor/dropify/dist/js/dropify.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="main/assets/js/app.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/assets/js/demo.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/assets/js/tables-datatable.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="main/assets/js/forms-upload.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="asset/js/rating.js"&gt;&lt;/script&gt;    
          &lt;script type="text/javascript"&gt;
              $('.rating').rating();
          &lt;/script&gt;
          &lt;script&gt;
              function toggle(value){
                  if(value=='hide'){
                      document.getElementById("allowedhr").setAttribute('disabled', true);
                      document.getElementById("allowedkm").setAttribute('disabled', true);
                      document.getElementById("extrahr").setAttribute('disabled', true);
                      document.getElementById("extrakm").setAttribute('disabled', true);              
                  }
                  else{
                      document.getElementById("allowedhr").removeAttribute('disabled');               
                      document.getElementById("allowedkm").removeAttribute('disabled');
                      document.getElementById("extrahr").removeAttribute('disabled');
                      document.getElementById("extrakm").removeAttribute('disabled');                 
                  }
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>TABLE is populated using the PHP code below:</p>
  
  <pre><code>    while($row=mysqli_fetch_array($resultSet)){
      $txtstr="";
      echo "&lt;tr&gt;
      &lt;td style='width:30%'&gt;" .$row["routeName"]. "&lt;/td&gt;
      &lt;td style='width:20%'&gt;
          &lt;label class='checkbox'&gt;&lt;input type='checkbox' name='pickup' checked value='Pickup' style='margin-left: 0px;margin-right:6px'&gt;Pickup&lt;/label&gt;
          &lt;label class='checkbox'&gt;&lt;input type='checkbox' name='drop' checked value='Drop' style='margin-left: 10px;margin-right: 6px'&gt;Drop&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input type='text' id='noofdays' value=".$row['noofdays']." name='noofdays' size='3'/&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input type='text' id='pickupamt' value=".$row['pickupamt']." name='pickupamt' size='5'/&gt;
      &lt;/td&gt;
      &lt;td style='width:20%'&gt;";
          if ($row['extraallowed']==1){
              $txtstr = "&lt;label class='radio-inline'&gt;&lt;input type='radio' name='SourceOfc' style='margin-left: 0px;margin-right: 6px' checked value='Yes' onclick=toggle('show')&gt;Yes&lt;/label&gt;";
              $txtstr.= "&lt;label class='radio-inline'&gt;&lt;input type='radio' name='SourceOfc' style='margin-left: 10px;margin-right: 6px' value='No' onclick=toggle('hide')&gt;No&lt;/label&gt;";
          }
          else{
              $txtstr = "&lt;label class='radio-inline'&gt;&lt;input type='radio' name='SourceOfc' style='margin-left: 0px;margin-right: 6px' value='Yes' onclick=toggle('show')&gt;Yes&lt;/label&gt;";
              $txtstr.= "&lt;label class='radio-inline'&gt;&lt;input type='radio' name='SourceOfc' style='margin-left: 10px;margin-right: 6px' checked value='No' onclick=toggle('hide')&gt;No&lt;/label&gt;";
          }
          echo $txtstr."&lt;/td&gt;
          &lt;td&gt;
              &lt;input type='text' id='allowedkm' value=".$row['allowedkm']." name='allowedkm' size='5'/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type='text' id='allowedhr' value=".$row['allowedhrs']." name='allowedhr' size='5'/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type='text' id='extrakm' value=".$row['extrakmamt']." name='extrakm' size='5'/&gt;
          &lt;/td&gt;
          &lt;td&gt; 
              &lt;input type='text' id='extrahr' value=".$row['extrahrsamt']." name='extrahr' size='5'/&gt;
          &lt;/td&gt;
      &lt;/tr&gt;";
  }
  </code></pre>