如何使用Ajax删除带有多个复选框的正确记录

Question

我有一个生成数据行的循环。如果我使用chrome开发人员工具，我可以看到每一行都有data-host-id的唯一值。但是，当我点击任何记录时，它总是更新第一条记录。它没有兑现我想要更新的记录。

注意：我不想同时删除多条记录，我只是想通过相关按钮删除相应的记录。

HTML代码片段

<input data-size="mini" type="checkbox" class="switch-api" 
    data-on-text="Yes" data-off-text="No" id="api_id" data-host-id="{{ $k }}" checked>

JS代码片段

$(".switch-api").bootstrapSwitch();
$('.switch-api').on('switchChange.bootstrapSwitch', function (event, state) {
if (state) {
    $.ajax({
        url: '/dashboard/'+ $('#api_id').attr('data-host-id') + '/toggleapicheck',
        data: { api_id: $('#api_id').attr('data-host-id'), state:'true'},

控制器

public function toggleapicheck(Request $request)
{
    $api_id = $request->input('api_id');
    $state = $request->input('state');
    $dashboard = new Dashboard();
    $dashboard->toggleApicheck($api_id, $state);
}

模型

function toggleApicheck($api_id, $state)
{
    $sf = new \SensioLabs\Consul\ServiceFactory(array('base_url' => "http://127.0.0.1:8500"));
    $kv = $sf->get('kv');
    $kv->put('apichecks/'.$api_id.'/enable',$state);
}

Answer 1

有两个问题：

1. 你有很多<input> tags。但是你强迫它使用相同的id="api_id"。您在此ID =＆gt; 上撰写依赖的其他操作因此您可以仅访问第一个 项目，具有该ID =＆gt; 为什么会导致问题 =＆gt; 解决方案：将api_id移至data-api-id属性
2. 您应该使用data（）而不是attr（）来获取HTML数据属性

试试我的解决方案。我认为这更有意义

- HTML

<input data-size="mini" type="checkbox" class="switch-api" 
    data-on-text="Yes" data-off-text="No" data-api-id="api_id" data-host-id="{{ $k }}" checked>

- JS

$(".switch-api").bootstrapSwitch();
$('.switch-api').on('switchChange.bootstrapSwitch', function (event, state) {
if (state) {
    $.ajax({
        url: '/dashboard/'+ $(this).data('host-id') + '/toggleapicheck',
        data: { api_id: $(this).data('api-id'), state:'true'},