Добавить зачеркнутый радиовход
В моем html у меня есть кнопка и форма радио, где входы создаются с использованием цикла for.
<form id = "form" class = "mb-1">
{% for option in option_list %}
<input class = "form-check-input text-primary" type = "radio" name = "option" value = "{{option}}"> {{option}} <br>
{% endfor %}
</form>
<button type = "button" class = "btn btn-primary" id = "btn">Button</button>
При нажатии кнопки радиовходы либо отключаются, либо включаются в зависимости от некоторого условия, которое у меня работает нормально, но при отключении параметра я также хочу добавить удар к вводу, чтобы лучше показать, что он отключен. В моем файле js есть что-то вроде этого.
$(document).ready(function() {
$('#btn').click(function() {
$('#form *').filter(':input').each(function(){
if (condition) {
$(this).prop('disabled', false)
}
else {
$(this).prop('disabled', true)
}
});
})
})
Я пробовал размещать теги label вокруг входных данных и использовать .wrap() и .css(("text-decoration", "line-through"), но это не сработало. Они отлично работают с обычным текстом, поэтому я думаю, я просто неправильно форматирую метки радио входа?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы должны обернуть текст параметра <label> (или любым другим тегом html), а затем применить стили к отключенному состоянию.
<form id = "form" class = "mb-1">
{% for option in option_list %}
<input class = "form-check-input text-primary" type = "radio" name = "option" value = "{{option}}">
<label>{{option}}</label>
<br>
{% endfor %}
</form>
<button type = "button" class = "btn btn-primary" id = "btn">Button</button>
Я не знаю, как на самом деле работает ваш цикл, но это так же просто, как сделать это:
HTML:
<input type = "radio" id = "male" name = "gender" value = "Male" />
<label for = "male">Male</label>
<input type = "radio" id = "female" name = "gender" value = "Female" />
<label for = "female">Female</labe>
CSS:
input[type=radio]:checked + label{
text-decoration: line-through;
}
вам просто нужно определить эти стили и обернуть {{option}} в дополнительную метку или любой другой элемент вместо того, чтобы писать так. Затем вы можете использовать соседний селектор братьев и сестер, чтобы пройти через него.