Add strikethrough to a radio input

user_14861754 0
Viewed 367

In my html I have a button and a radio form where the inputs are created using a for loop.

<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>

When the button is clicked, the radio inputs are either disabled or enabled based on some condition, which I have working fine, but when disabling an option, I also want to add a strike to the input to better show it's disabled. My js file has something like this.

$(document).ready(function() {
    $('#btn').click(function() {
        $('#form *').filter(':input').each(function(){
            if (condition) {
                $(this).prop('disabled', false)
            }
            else {
                 $(this).prop('disabled', true)
            }
        });
    })
})

I've tried putting label tags around the inputs and using .wrap() and .css(("text-decoration", "line-through"), but it didn't work. They work on regular text fine, so I think I'm just not formatting the radio input labels correctly?

django html jquery javascript
2 Answers

You should wrap the option text by <label> (or any other html tag) and then apply styles there on disabled state.

<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>
user_94803480

I don't now how your loop actually works but it is as simple as doing this:

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;
}

you just need to define these styles and wrap the {{option}} in an extra label or any other element instead of writing like this. Then you can use the adjacent sibling selector to strike through it

user_86845210
Related