有时必须在复选框数据上单击两次 - toggle =“buttons”

Question

任何帮助都会很棒:)我想要打开/关闭切换，我想我就在那里，但有时我必须在按钮上单击两次，有时我不会？

我可能会忍受它，但它让我感到困惑，我无法弄明白 - 对整个Ajax帖子malarky来说都是新的。

我正在使用Bootstrap 3，主要使用chrome

由于

我的HTML - 表格（由DB构建）

    <table class="table">
    <?php
    /* DB STUFF */
    if($myquery->rowCount()>0) {
        while ($row = $myquery->fetch(PDO::FETCH_ASSOC)) {
            ?>
            <tr>
                <td><?php echo $row['id']; ?></td>
                <td><?php echo $row['name']; ?></td>
                <td><?php 
                    $reject = $row['reject']; 
                    if($reject == 1) { 
                        ?>
                    <div data-toggle="buttons">
                        <div class="switch_label btn-group" data-id="<?php echo $row['id']; ?>">
                            <label class="btn btn-success">
                                <input id="exc_agent<?php echo $row['id']; ?>" type="checkbox" autocomplete="off"> <span id="sp<?php echo $row['id']; ?>">On</span>
                            </label>
                        </div>
                    </div>
                    <div class="result_label<?php echo $row['id']; ?>"> </div>
                    <?php
                } else {
                    ?>
                    <div data-toggle="buttons">
                        <div class="switch_label btn-group" data-id="<?php echo $row['id']; ?>">
                            <label class="btn btn-danger">
                                <input id="exc_agent<?php echo $row['id']; ?>" type="checkbox" autocomplete="off"> <span id="sp<?php echo $row['id']; ?>">Off</span>
                            </label>
                        </div>
                    </div>
                    <div class="result_label<?php echo $row['id']; ?>"> </div>
                    <?php
                }
                ?>
            </td>
        </tr>
        <?php
    }
}
?>
</table>

脚本：

<script>
var exl_outlet_id;

$(document).on("click", ".switch_label", function() {
    exl_outlet_id = $(this).data('id');
});

$.ajaxSetup ({
    cache: false
});

$(".switch_label").find("input[type=checkbox]").on("change",function() {
    var exl_status = $(this).prop('checked');
    if(exl_status == true) {
        exl_status = "1";
        $(this).parent().removeClass("btn-success");
        $(this).parent().addClass("btn-danger");
        $("#sp" + exl_outlet_id).html('Off');
    } else {
        exl_status = "0";
        $(this).parent().removeClass("btn-danger");
        $(this).parent().addClass("btn-success");
        $("#sp" + exl_outlet_id).html('On');
    }
    $.ajax ({
        url: 'meh.php',
        type: 'POST',
        data: {"id": exl_outlet_id,
        "status": exl_status},
        success: function(data) {
            if(!data.success) {
                //$(".result_label" + exl_outlet_id).html(data);
            } else {
            }
        },
        error: function(error)
        {
            alert("Failed", "Fail to update status try again", "error");
        }
    });
});
</script>

PHP：

$status = $_POST['status'];
$id = $_POST['id'];

if($status == 1) {
    $reject = 0;
    /* Update DB */
    return true;
} else {
    $reject = 1;
    /* Update DB */
    return true;
}