Пользователь не может проверить ввод, когда jQuery делает это? Или что-то вроде этого

Question

У меня проблема с скриптом jQuery и отмеченным вводом. У меня есть такое окно в HTML:

И как вы можете видеть, есть один вход проверяется. Когда я пытаюсь щелкнуть по этому входу (а не по тексту рядом с ним, только на входе), сценарий запускается правильно, но вход не проверяется.

Я написал сценарий для запуска, когда вы нажимаете div, который является вводом и текстом.

Вот кусок кода:

$('#S8l2560g').find('input').css('cursor', 'pointer').parent().css('cursor', 'pointer').toggle(function() { 
    //setCookie('Search information','hidden',168); 
    $('#k5ORgvNM span').text('yes, is checked').css('color', 'red'); 
    $(this).find('input').attr('checked', true); 
}, function() { 
    //setCookie('Search information','visible',168); 
    $('#k5ORgvNM span').text('no, is nonchecked').css('color', 'blue'); 
    $(this).find('input').attr('checked', false); 
}); 

Я не знаю, почему это происходит. Я подозреваю, что это проблема в HTML.

Я разрезал всю эту панель и вложил ее в jsFiddle, чтобы вы могли ее проверить.

Вот ссылка: http://jsfiddle.net/IdolwSzutrab7/sv7w5/

Просто попробуйте нажать только на входе, и после того, как на текст возле входа.

Я даже пытался скопировать переключатель и перенести его перед партией, но это не сработало.

Это не большая проблема, потому что скрипт работает, но он вводит в заблуждение людей, делая слишком много раз, чтобы щелкнуть.

Могу ли я обратиться за помощью? Я бы хотел, чтобы он работал так, как я этого хочу.

Answer 1

Как было предложено использовать @Musa <label /> вместо <span />

<label /> имеет атрибут for целевой конкретное поле ввода. Таким образом, щелчок на ярлыке будет фокусировать входной элемент.

Примечание: Значение Идентификатор входа <input id="label-check" /> должно быть таким же, как этикетки для <label for="label-check"> значения.

HTML:

<label for="label-check"> 
    <input type="checkbox" id="label-check" style="vertical-align: middle;"/> Nie pytaj więcej... 
</label> 

JS:

$('#S8l2560g').find('input').css('cursor', 'pointer').change(function(e) { 
     if ($(this).is(':checked')) { 
      $('#k5ORgvNM span').text('yes, is checked').css('color', 'red'); 
      $(this).prop('checked', true); 
     } 
     else { 
      $('#k5ORgvNM span').text('no, is nonchecked').css('color', 'blue'); 
      $(this).prop('checked', false); 
     } 
    }); 

CSS:

label { 
    cursor: pointer; 
} 

LIVE EXAMPLE