Ajaxを使用して複数のチェックボックスを使用して正しいレコードを削除する方法

Question

データの行を生成するループがあります。クローム現像ツールを使用すると、各行に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

2つの問題があります。

1. あなたは<input> tags多くを持っているが。しかし、あなたは同じid="api_id"を使用するように強制します。 api_iddata-api-idをに移動：そして、あなたはを書き、他のアクションは、=>ですから、だけアクセスそのIDを持つアイテム最初に=>それが引き起こすなぜ問題=>ソリューションができ、このIDにに依存します属性
あなたは私のsolutiを試してみてくださいHTMLデータが

属性を取得する代わりのattr（）のデータを（）を使用する必要があります

に。 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'},