在Ajax上重复记录(检查)


Record is repeated on Ajax (check)

嗨,我有一个嵌入了trs和ID的表。我的插入正在工作,我现在遇到的问题是它总是重复不应该重复的记录。

    $('#list-tbl tr').each(function(){
    var $this = $(this);
    var ID = $(this).attr("id");
    var yes = $('#ckboxyes'+ID).val();
    var no = $('#ckboxno'+ID).val();
    var rep = $('#ckboxrep'+ID).val();
    var user_id = $('#user_id'+ID).val();
    var rep_id = $('#rep_id').val();
        $('input[type=checkbox]', $this).change(function(){
            if($('.ckboxyes'+ID, $this).is(':checked')){
                $('input[type=checkbox]', $this).prop('disabled',true);
                $.ajax({
                    type: "POST",
                    url: "<?= MAINSITE_INDEX.'tech/updater'?>",
                    data: "yes=" + yes + "&no=" + no+ "&rep=" + rep + "&rep_id=" + rep_id + "&user_id=" + user_id + "&did=" +ID,
                    success: function(){
                        $('form#submit').hide();
                            alert(ID);
                        $('div.success').fadeIn();   
                    }
                });
                $(this).prop('disabled',false);
            } else if($('.ckboxno', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
            } else if($('.ckboxother', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
                $('select[name=proxy]', $this).attr('disabled', false);
            } else {
                $('input[type=checkbox]', $this).prop('disabled',false);
                $(this).prop('disabled',false);
                $('select[name=proxy]', $this).attr('disabled', true);
            }
        });
});

<th>Day 1</th>
<th>Attended</th>
        <tr style="font-size: 10px;" id="1">
        <td width="450px;">Description 1</td>
        <td>
            <input type="hidden" name="user_id" id="user_id" value="1" />
            <input type="checkbox" name="ckboxyes1" id="ckboxyes1" class="ckboxyes1" value="1" style="width: auto;" /> Yes
            <input type="checkbox" name="ckboxno1" id="ckboxno1" class="ckboxno1" value="1" style="width: auto;" /> No
            <input type="checkbox" name="ckboxother1" id="ckboxother1" class="ckboxother1" value="1" style="width: auto;" /> Other
            <select name="rep_id" style="width: auto;" disabled="true">
                <option value="">Select</option>
                <option value="3">User A</option>
                <option value="4">User B</option>
            </select>
            <input type="submit" name="submit" id="submit" value="Go" disabled="true" class="stylish" />
        </td>
    </tr>
        <tr style="font-size: 10px;" id="2">
        <td width="450px;">Description 1</td>
        <td>
            <input type="hidden" name="user_id" id="user_id" value="1" />
            <input type="checkbox" name="ckboxyes2" id="ckboxyes2" class="ckboxyes2" value="1" style="width: auto;" /> Yes
            <input type="checkbox" name="ckboxno2" id="ckboxno2" class="ckboxno2" value="1" style="width: auto;" /> No
            <input type="checkbox" name="ckboxother2" id="ckboxother2" class="ckboxother2" value="1" style="width: auto;" /> Other
            <select name="rep_id" style="width: auto;" disabled="true">
                <option value="">Select</option>
                <option value="3">UserA</option>
                <option value="4">UserB</option>
            </select>
            <input type="submit" name="submit" id="submit" value="Go" disabled="true" class="stylish" />
        </td>
    </tr>

我现在遇到的问题是,每次我勾选复选框时,它都会将第一个值插入数据库。这张桌子应该很长,我只是为了节省时间而把它缩短了。

谢谢。。

尝试

$(function(){      

        $(':checkbox').change(function(){
             var $this = $(this).closest("tr");
             var ID = $(this).closest("tr").attr("id");
             var yes = $('#ckboxyes'+ID).val();
             var no = $('#ckboxno'+ID).val();
             var rep = $('#ckboxrep'+ID).val();
             var user_id = $('#user_id'+ID).val();
             var rep_id = $('#rep_id').val();
            if($('.ckboxyes'+ID, $this).is(':checked')){
                $('input[type=checkbox]', $this).prop('disabled',true);
                $.ajax({
                    type: "POST",
                    url: "<?= MAINSITE_INDEX.'tech/updater'?>",
                    data: "yes=" + yes + "&no=" + no+ "&rep=" + rep + "&rep_id=" + rep_id + "&user_id=" + user_id + "&did=" +ID,
                    success: function(){
                        $('form#submit').hide();
                            alert(ID);
                        $('div.success').fadeIn();   
                    }
                });
                $(this).prop('disabled',false);
            } else if($('.ckboxno', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
            } else if($('.ckboxother', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
                $('select[name=proxy]', $this).attr('disabled', false);
            } else {
                $('input[type=checkbox]', $this).prop('disabled',false);
                $(this).prop('disabled',false);
                $('select[name=proxy]', $this).attr('disabled', true);
            }
        });
});

您不必使用.each来绑定更改事件

DEMO