Dodaj przekreślenie do zaznaczonego pola wyboru

Question

Próbuję dodać przekreślenia, gdy zaznaczę pole wyboru w mojej formie (Bootstrap v3). I kodowane to bootply:

<div class="form-group "> 
    <label for="inputName" class="col-md-1 control-label">select</label> 
    <div class="col-md-5"> 
     <div class="checkbox"> 
      <label><input type="checkbox" name="packersOff" class="strikethrough" value="1">sssssssss</label> 
     </div> 
    </div> 
</div> 

i dodaje klasy w css

.strikethrough:checked{ 
    text-decoration:line-through; 
} 

ale to nie działa ..

Answer 1

Problem jest to, że starają się zastosować line-through na pole wyboru, gdzie jako tekst znajduje się wewnątrz etykiety. Można zawinąć tekst wewnątrz <span> i zmieniać to CSS na :checked

<div class="checkbox"> 
    <label> 
     <input type="checkbox" name="packersOff" class="strikethrough" value="1"> 
     <span>sssssssss</span> 
    </label> 
</div> 




.strikethrough:checked + span{ 
    text-decoration:line-through 
} 

Bootply

Answer 2

.strikethrough:checked + .strikeThis { 
 
    text-decoration: line-through 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group "> 
 
    <label for="inputName" class="col-md-1 control-label">select</label> 
 
    <div class="col-md-5"> 
 
    
 
     <input name="packersOff" class="strikethrough" value="1" type="checkbox"> 
 
     <label for="packersOff" class="strikeThis">sssssssss</label> 
 
    
 
    </div> 
 
</div>

Answer 3

Selektor Pseudo-klasa :checked CSS reprezentuje żadnego radia (<input type="radio">) , pole wyboru (<input type="checkbox">) lub opcję (<option> w elemencie <select>), który jest sprawdzany lub przełączany do stanu włączonego. Użytkownik może zmienić ten stan, klikając odpowiedni element lub wybierając inną wartość, w takim przypadku: pseudo-klasa: checked pseudo-klasa już nie ma zastosowania dla tego elementu, ale trafi do odpowiedniego.

Źródło: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked

Aby działać, zmieniać swój HTML:

<div class="form-group "> 
    <label for="inputName" class="col-md-1 control-label">select</label> 
    <div class="col-md-5"> 
     <div class="checkbox"> 
      <input name="packersOff" class="strikethrough" value="1" type="checkbox"> 
      <label for="packersOff">sssssssss</label> 
     </div> 
    </div> 
</div> 

A twój CSS:

.strikethrough:checked + label { 
    text-decoration:line-through 
} 

DEMO.

Answer 4

Oto rozwiązanie umieścić strajku przez gdy wejście jest zaznaczone:

HTML:

<div class="form-group "> 
    <label for="inputName" class="col-md-1 control-label">select</label> 
    <div class="col-md-5"> 
     <div class="checkbox"> 
      <input type="checkbox" name="packersOff" value="1"/> 
      <label class="strikethrough">sssssssss</label> 
     </div> 
    </div> 
</div> 

CSS

input[type=checkbox]:checked + label.strikethrough{ 
    text-decoration: line-through; 
} 

JSFIDDLE

Dzięki takiemu rozwiązaniu, gdy kiedykolwiek pole wyboru jest zaznaczone, że zrobi coś na etykiecie. abyś mógł zrobić odważne lub zmienić kolor, jeśli chcesz.

Answer 5

jQuery rozwiązanie:

$('#packersOff').change(function() { 
 
    if ($('#packersOff').prop('checked')) { 
 
    $('#test').css('text-decoration','line-through'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group "> 
 
\t <label for="inputName" class="col-md-1 control-label">select</label> 
 
    <div class="col-md-5"> 
 
\t \t <div class="checkbox"> 
 
      <label for="packersOff" id="test">sssssssss</label> 
 
      <input type="checkbox" name="packersOff" id="packersOff" class="strikethrough" value="1" /> 
 
     </div> 
 
    </div> 
 
</div>

Answer 6

Ten pracował dla mnie.

li.my-item:hover span { visibility: visible; } 
li.my-item span { visibility:hidden; }