Почему ярлык флажка не скрывается, когда я его скрываю?

Question

У меня есть флажок:

<input type="checkbox" id="OutOfPocket">Are you okay with paying out-of-pocket for these services?</input> 

и у меня есть некоторые jQuery скрыть это:

$('#OutOfPocket').hide(); 

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

$('#OutOfPocket').next('label').hide(); 
$('#OutOfPocket').siblings('label').hide(); 
$('#OutOfPocket').next('input ~ label').hide(); 
$('#OutOfPocket').next('span').hide(); 
$('#OutOfPocket').siblings('span').hide(); 
$('#OutOfPocket').next('input ~ span').hide(); 

какой код мне нужно, чтобы скрыть текст флажок?

Answer 1

Насколько я знаю, <input/> не поддерживает внутренний текст. От <input> on MDN:

Допустимое содержание - Нет, это элемент пустоты.

Хотя это может быть ярлык с любым браузером, который вы используете, вероятно, вы захотите использовать фактический <label> для вашего ярлыка.

<input type="checkbox" id="OutOfPocket"/><label for="OutOfPocket">Are you okay with paying out-of-pocket for these services?</label> 

Answer 2

Чтобы добавить ответ Роба, теги ввода являются самозакрывающимися. Для флажков атрибут value скрыт. Таким образом, вы на самом деле писать метку после ввода тега:

<input type="checkbox">Are you okay with paying out-of-pocket for these services? 

В этом случае вам нужно либо обернуть вещи в контейнере, т.е. span тега, или обернуть текст в метке.

Answer 3

Попробуйте это:

<label for="OutOfPocket"> 
<input type="checkbox" id="OutOfPocket"/> 
    <span>Are you okay with paying out-of-pocket for these services?</span> 
</label> 

Это позволяет флажок проверять при нажатии кнопки в тексте.

и позволяет скрыть текст легко:

$('label span').hide()