向无线电输入添加删除线答案

【问题标题】：Add strikethrough to a radio input向无线电输入添加删除线
【发布时间】：2020-12-26 03:10:53
【问题描述】：

在我的 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)
            }
        });
    })
})

我尝试在输入周围放置标签标签并使用 .wrap() 和 .css(("text-decoration", "line-through")，但没有奏效。它们适用于常规文本，所以我认为我只是没有正确格式化无线电输入标签？

【问题讨论】：

标签： javascript html jquery django

【解决方案1】：

我现在不知道你的循环实际上是如何工作的，但它就像这样做一样简单：

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}} 包装在一个额外的标签或任何其他元素中，而不是像这样写。然后你可以使用相邻的兄弟选择器来删除它

【讨论】：

【解决方案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>

【讨论】：