Javascriptでダイナミック配列から要素を選択および選択解除するにはどうすればよいですか？

Question

<div id="tables-box" class="module-box"> 
    <form method="POST" action="<?php echo current_url(); ?>"> 
     <?php echo lang('header');?> 
     <div class="btn-group-la" role="group" aria-label="First group" >  
     <?php 
     foreach ($tables as $table) 
     { 
      //table status 
      //0- busy (red) 
      //1- available (empty) 
      //2- waiting for check (light blue) 
      //3- done (blue) 
      //4- prepare (yellow) 

      $status = lang('status_available'); 
      switch ($table['table_status']) { 
       case 0: 
        $btn_class = "btn btn-danger btn-spacing"; 
        $btn_extra = "disabled"; 
        $status = lang('status_busy'); 
        break; 
       case 1: 
        $btn_class = "btn btn-success btn-spacing"; 
        $btn_extra = "data-toggle='button' aria-pressed='false'"; 
        $status = lang('status_available'); 
        break; 
       case 2: 
        $btn_class = "btn btn-info btn-spacing"; 
        $btn_extra = "disabled"; 
        $status = lang('status_check'); 
        break; 
       case 3: 
        $btn_class = "btn btn-primary btn-spacing"; 
        $btn_extra = "disabled"; 
        $status = lang('status_done'); 
        break; 
       case 4: 
        $btn_class = "btn btn-warning btn-spacing"; 
        $btn_extra = "disabled"; 
        $status = lang('status_prepare'); 
        break; 
      }  
     $btn = 'id="table_'.$table['table_id'].'" type="button" class="'.$btn_class.'" '.$btn_extra; 
     echo "<button ", $btn, ">"; 
     echo $table['table_name'], "<br/>"; 
     echo lang('persons'), " ", $table['max_capacity'], "<br/>"; 
     echo $status, "<br/>"; 
     echo "</button>"; 
     } 
     ?> 
      </div>  

      <span id="selected"><?php echo lang('select_table');?></span> 
      <input type="hidden" name="table_id" id="table_id" value="-1" /> 
      <input type="hidden" name="location_id" value="<?php echo $location_id;?>" /> 
      <input type="hidden" name="order_type" value="<?php echo $order_type;?>" /> 
      <div>   
      <input type="submit" id="btnSubmit" class="btn btn-primary" value="<?php echo lang('button_save');?>" disabled /> 
      </div> 
     </form> 
</div> 

スクリプト

<script type="text/javascript"><!-- 
    $(document).ready(function() {    
     <?php foreach ($tables as $table){?> 
     $("#table_<?php echo $table['table_id'];?>").click(function(){ 
      $('#selected').text('<?php echo lang('selected_table')." (".$table['table_name'].")";?>'); 
      $('#table_id').val('<?php echo $table['table_id'];?>'); 
      $('#btnSubmit').removeAttr('disabled'); 
      //alert($('#table_id').val()); 
     }); 
     <?php }?> 
    }); 
--></script> 

私はボタンのグループとIDを持つすべてのボタンを持って、私はボタンを選択し、選択解除します。ボタンを選択するとIDが配列に追加され、ボタンを選択解除するとそのIDは同じ配列から削除されます。その後、この配列を送信ボタンで投稿します。

Answer 1

私は2つのクラスを作成するでしょう。 Clickスイッチクラスでは、クラスボタンに応じてjavascriptを使用して配列に追加または削除します。