如何启用或禁用表的列的复选框

时间:2017-08-24 11:22:59

标签: javascript php jquery json checkbox

我是javascript / jquery和php的新手。我在php中显示表的内容。当我选择一个复选框时,我调用了一个函数更改。现在我必须禁用除选中复选框以外的所有复选框。什么参数应该通过更改功能?在更改功能中我需要做什么才能获得所需的输出?

<div class = "auto_hi_wid " style = "margin-left:10px" id = "generate_shipment">
 <table border = '2' style="width:100%">
             <thead>

            <tr class = "odd">

           <th scope = "col" abbr ="RouteName"width = "0%">RouteName</th>

           <th scope = "col" abbr ="StartLocation"width = "60%">StartLocation</th>

           <th scope = "col" abbr ="EndLocation"width = "20%">EndLocation</th>

           <th scope = "col" abbr ="StartTime"width = "10%">StartTime</th>

           <th scope = "col" abbr ="EndTime"width = "10%">EndTime</th>

           <th scope = "col" abbr ="SelectBox"width = "10%">SelectBox</th>

           </tr>

          </thead>

  </table>
<?php

     if (sizeof($bookmarked_route) == 0) {

         echo '<br><div style="text-align:center;font-size:200%;">No Results </div>';
      } 
     else { 
           $start_time = "00:00";

           echo "<table>\n";
           foreach ($bookmarked_route as $route) {
                  $route1 = json_decode($route['route_info'], true);

                  if (isset($route['route_name'])) {
                      echo "<tr>\n".

                      "<td>{$route['route_name']}</td>\n".

                      "<td>{$route1['start_location']}</td>\n".

                      "<td>{$route1['end_location']}</td>\n".

                      "<td>{$start_time}</td>\n".

                      "<td>{$route1['vehicle_engine_time_in_sec']}
                      </td>\n".

                      "<td><input type=\"checkbox\" name=\"checkbox\" 


value=\"\"id=\"checkbox_{$route['route_name']}\"onclick=\"change()\"></td></tr>";
                    }
          }
        echo "</table>";
    }
  ?>
</div>

function change(){}

1 个答案:

答案 0 :(得分:0)

这是使用jquery的解决方案。我用类来处理它。试试这个

<?php

     if (sizeof($bookmarked_route) == 0) {

         echo '<br><div style="text-align:center;font-size:200%;">No Results </div>';
      } 
     else { 
           $start_time = "00:00";

           echo "<table>\n";
           foreach ($bookmarked_route as $route) {
                  $route1 = json_decode($route['route_info'], true);

                  if (isset($route['route_name'])) {
                      echo "<tr>\n".

                      "<td>{$route['route_name']}</td>\n".

                      "<td>{$route1['start_location']}</td>\n".

                      "<td>{$route1['end_location']}</td>\n".

                      "<td>{$start_time}</td>\n".

                      "<td>{$route1['vehicle_engine_time_in_sec']}
                      </td>\n".

                      "<td><input type=\"checkbox\" name=\"checkbox\" 


value=\"\"id=\"checkbox_{$route['route_name']}\" class=\"change_states\"></td></tr>";
                    }
          }
        echo "</table>";
    }
  ?>

JQuery:

<script type="text/javascript">
$(document).ready(function() {
  $('.change_states').on("change",function(){
      if($(this).prop("checked") == true){
        $(".change_states").attr("disabled", true); //disable all check box
        $(this).removeAttr("disabled");// enable current checkbox
    }

    else //Add this part only if you have to enable all checkbox after uncheck cuurent one
    {
       $(".change_states").removeAttr("disabled");
    }
  });

});

</script>