javascript - 切换按钮打印双精度值

Question

我的表中有切换按钮名称Enable, Disable，如果我将按钮 Enable 的值更改为 Disable，则它会打印 Disable value two times。

我的代码：

 <table id="prodcutTable" class="table table-bordered table-striped" style="width: 100%;"  >
            <thead>
              <tr style="font-size: 12px; line-height: 0px; ">
                <th>SR No</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email ID</th>
                <th>Phone Number</th>
                <th>Status</th>
                <th></th>
              </tr>
              <?php $counter=1?>
              <?php foreach($result as $result):?>
               <tr>
                    <input type="hidden" name="txt_user_id" value="<?php echo $result['id']?>">
                    <td><?php echo $counter?></td>
                    <td><?php echo $result['username']?></td>
                    <td><?php echo $result['lastname']?></td>
                    <td><?php echo $result['email']?></td>
                    <td><?php echo $result['phonenumber']?></td>
                    <td>
                      <?php 
                           if ($result['status']=="active"){
                              ?> 
                              <span class="badge badge-boxed badge-soft-success">Active</span>
                              <?php
                              }else if($result['status']=="inactive"){
                                ?>
                                <span class="badge badge-boxed badge-soft-warning">InActive</span>
                                <?php 
                            }
                      ?>
                      </td>
                    <td>
                      <input type="checkbox" class="btn-toggle" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" <?php 
                      if($result['status']=="active") echo "checked"; ?> >
                    </td>

              </tr>
            <?php $counter++?>
            <?php endforeach;?>
            </thead>
          </table>

<script>
    function disableUser(id) {
            $.ajax({
              url: "<?php echo base_url(); ?>admin_controller/AdminController/disableUser",
              method: "post",
              data: {id:id},
              dataType:'json',
        })
          .done(function( data ) {
                if(data.status=="true"){
                    alert('Enabled');
                    setTimeout(function(){location.reload();},100);  
                }else{
                    alert("Try Again");
                }
          });
    }
     function enableUser(id) {
            $.ajax({
              url: "<?php echo base_url(); ?>admin_controller/AdminController/enableUser",
              method: "post",
              data: {id:id},
              dataType:'json',
        })
          .done(function( data ) {
                if(data.status=="true"){
                    alert('Disabled');
                    setTimeout(function(){location.reload();},100);          
                }else{
                    alert("Try Again");
                }
          });
    }
      $('.btn-toggle').change(function(){
        var tr = $(this).parents('tr');
        //console.log(tr);
        var txt_user_id            = tr.find($('input[name="txt_user_id"]')).val();
        //console.log(txt_user_id);

        var mode= $(this).prop('checked');
        console.log(mode);
        if($(this).prop('checked'))
          {
            enableUser(txt_user_id);
          }
          else
          {
            disableUser(txt_user_id);
          }
      });
    </script>

我不知道我在代码中哪里写错了代码。以下是关于如何看起来像切换栏的表格的图像。颜色也从蓝色变为白色。

标签： javascriptphpjquerycodeignitertoggle

Answer 1

将此代码放入您的ready函数中：

$('.btn-toggle').bootstrapToggle({
    on: 'Enabled',
    off: 'Disabled'
});