2

При нажатии на чекбокс должно сработать событие change. В котором все другие чекбоксы должны стать unckecked. При нажатии ничего не происходит, поставил точку останова, даже не заходит. Что именно ни так? Заранее спасибо за ответ.

Использую для отображения чекбоксов библиотеку https://github.com/fntneves/jquery-labelauty

projects.coffee

jQuery(document).on 'turbolinks:load', ->

  $('.control__check').labelauty
    checked_label: "Cancel",
    unchecked_label: "Select",
    force_random_id: true


   $('.control__check').change ->
        thisElement = $(this)
        if ($(this).prop("checked"))
          $('ul.content-list content-list__my-response content-list_responses').
            find('.control__check labelauty').each (index, elem) ->
              if ($(elem).prop("checked") && !thisElement )
                elem.prop('checked', false) 

_responses.html.erb

<ul class="content-list content-list__my-response content-list_responses">
  <% @project.responses.each do |response| %> 
    <% if response.persisted? %>
      ................................................................        
          <div class="controls">
            <%= check_box_tag '', true, false, { class: "control__check" } %>  
          </div>
      .................................................................    
        </li>
      <% end %>
<% end %>
</ul>

ОБНОВЛЕНО 14.06.16:

Это исходный код чекбокса HTML:

<div class="controls">
  <input type="checkbox" name="dfvfvfdvf" id="labelauty-179303" value="true"         class="control__check labelauty" style="display: none;">
     <label for="labelauty-179303"><span class="labelauty-unchecked-image</span>
  <span class="labelauty-unchecked">Select</span>
  <span class="labelauty-checked-image"></span>
  <span class="labelauty-checked">Cancel</span></label>  
</div>

2 ответа 2

3

Если честно, какое-то сильное колдунство для переключения. Я подозреваю, что дело вот в этом:

$('ul.content-list content-list__my-response content-list_responses')

find('.control__check labelauty')

В обоих случаях селектор неправильный. Нет в HTML тэгов labelauty, content-list_responses и content-list__my-response. Видимо, по задумке, это должны быть классы, а селекторы для классов начинаются с .. Подробности тут. Если очень хочется повесить событие на изменение оригинальных чекбоксов - можно брать оригинальный селектор: $('.control__check')

Но зачем так сложно? Судя по примерам этого плагина, он умеет работать с инпутами типа radio. Соответственно, велосипед не нужен:

<% @project.responses.each do |response| %>
  <%= radio_button_tag 'my_radio', true, false, { class: "control__check" } %>
<% end %>

$('.control__check').labelauty
  checked_label: "Cancel",
  unchecked_label: "Select",
  force_random_id: true

Должно работать как нужно

Замечание: атрибут name становится обязательным. Без него могут начаться косяки с группировками.

5
  • Спасибо за ответ. я и беру оригинальный селектор - '.control__check').change ->... Посмотрите мой скрипт. При изменении вообще не заходит в код обработчика события. Дело в том что по умолчанию, чекбоксы могут быть все не активные. Соответственно радио баттон не подходит. 10 июн 2016 в 13:20
  • @StefanHansch, согласен, поторопился. А можно увидеть во что кофе компилируется?
    – anoam
    10 июн 2016 в 14:03
  • @StefanHansch радиобаттоны могут быть выключены в начальном состоянии. Отличие лишь в том, что после выбора обратно в это состояние их привести нельзя. Конечно, если этот плагин дополнительно не ограничивает их.
    – user181100
    11 июн 2016 в 10:27
  • @anoam Я добавил исходный код html чекбокса. 14 июн 2016 в 6:58
  • @StefanHansch, супер! Только я просил js, который получился из представленного coffee.
    – anoam
    14 июн 2016 в 8:12
-2

В исходном html чекбокса строка:

<label for="labelauty-179303"><span class="labelauty-unchecked-image</span>

Несколько не валидна. Ошибка переноса или ошибка генератора html?

Если ошибка была при генерировании написании html, то может и javascript спотыкается на данном моменте?

При изменении html на валидный как минимум срабатывает alert в функции change:

https://jsfiddle.net/nxnpn20j/3/

Единственное, что было изменено - переписан код с события turbolinks:load на $(document).ready

4
  • Посмотрите внимательнее, все валидно. Ваш ответ является скорее вопросом. В следующий раз пишите подобные сообщения в комментарии к вопросу.
    – ilyaplot
    21 июн 2016 в 7:19
  • @ilyaplot нет, это вы посмотрите внимательнее. 21 июн 2016 в 7:42
  • Да, извиняюсь, есть проблемы
    – ilyaplot
    21 июн 2016 в 7:54
  • Извиняюсь, не разобрался до конца с тем, как правильно взаимодействовать с ответами/комментариями. В комментарий к вопросу писать мне система не даёт. 21 июн 2016 в 8:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.