So senden Sie Daten durch Klicken auf ein Label für ein Kontrollkästchen

Question

Ich möchte ein Formular senden, indem Sie auf ein Label für ein Kontrollkästchen klicken. Das Kontrollkästchen wird nicht angezeigt, und das Label wird als Schaltfläche formatiert. Dies ist mein Code:

<%= form_tag(fetch_games_index_path, method: :get, id: 'games-filter-form', remote: true) do %> 
    <%= check_box_tag 'mobile[]', 'true', false, id: 'games-filter-checkbox', class: 'games-filter-checkbox' %> 
    <label for="games-filter-checkbox" id="game-mobile-0"></label> 
<% end %> 

und entsprechende js:

$('#game-mobile-0').click(function() { 
    $('#games-filter-form input[type="hidden"]').submit(); 
}); 

Auf diese Weise, wenn ich zum ersten Mal auf ein Etikett klicken, setzt das Kontrollkästchen true, aber die gesendeten params sind leer. Wenn ich erneut auf das Label klicke, wird das Kontrollkästchen auf false gesetzt, und ich kann in Params sehen: "mobile"=>["true"]. Ich habe den folgenden Code ausprobiert:

$('#game-mobile-0').click(function() { 
    if($('#games-filter-checkbox').prop('checked', true)) { 
    $('#games-filter-form input[type="hidden"]').submit(); 
    } 
}); 

aber dabei die Animation des Etiketts, die gestylt ist nicht funktioniert. Wie kann dieses Problem behoben werden? Danke voraus.

Answer 1

Dieser Code half:

$('#game-mobile-0').click(function() { 
    setTimeout(function() { 
    $('#games-filter-form input[type="hidden"]').submit(); 
    }, 300); 
}); 

Answer 2

Hier stellen Sie den Wert in dem bedingten anstatt seinen Wert zu verweisen.

$('#game-mobile-0').click(function() { 
    if($('#games-filter-checkbox').prop('checked', true)) { 
    $('#games-filter-form input[type="hidden"]').submit(); 
    } 
}); 

http://api.jquery.com/prop/#prop-propertyName-value

$('#game-mobile-0').click(function() { 
    // cache a reference 
    var checkitem = $('#games-filter-checkbox'); 
    // set to the value it is NOT at present (check if not, un-check if checked) 
    checkitem.prop('checked', !checkitem[0].checked) 
    // if checked now, submit 
    if(checkitem[0].checked) { 
     // submit form with this id: 
     $('#games-filter-form').submit(); 
    } 
});