Ajouter barré case est cochée

Je suis en train d'ajouter barré quand je sélectionne une case à cocher dans mon formulaire (Bootstrap v3). J'ai codé ce 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>

et ajout d'une classe css

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

mais ça ne fonctionne pas..

je n'ai pas d'espace, je l'ai écrit mal ici. J'ai édité la question
Où en êtes-vous essayer d'ajouter une grève par le biais d'? l'entrée ou le texte?
Vous cherchez une solution d'activer Javascript ainsi?
le texte @Andrew. Dans ssss
Je préfère sth avec css.. mais si vous avez une solution avec javascript ou jquery pourquoi pas..
mettre la classe sur l'étiquette pas de l'entrée
est juste, mais malheureusement il n'y a pas de parent sélecteur CSS. Vérifier ma réponse pour une solution.

InformationsquelleAutor yaylitzis | 2015-06-22

Voici une solution pour mettre une grève lors de votre entrée est cochée:

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

Avec cette solution lorsque la case est cochée, il va faire quelque chose à l'étiquette. si vous pouviez le mettre en gras ou changer sa couleur si vous voulez.

InformationsquelleAutor Andrew

Problème, c'est que vous essayez d'appliquer la line-through sur la case où le texte est à l'intérieur de l'étiquette. Vous pouvez envelopper le texte à l'intérieur d'un <span> et modifier du CSS sur :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

InformationsquelleAutor Lokesh Suthar

CSS:

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

HTML:

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

InformationsquelleAutor Manoj Kumar

1

La :checked CSS pseudo-sélecteur de classe représente n'importe quelle radio (<input type="radio">), case (<input type="checkbox">) ou option (<option>
dans un <select>) de l'élément qui est activé ou activé à l'état on. L'
l'utilisateur peut modifier cet état en cliquant sur l'élément, ou la sélection d'un
valeur différente, auquel cas le :vérifié pseudo-classe n'est plus
s'applique à cet élément, mais pour le moment pertinent.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked

Afin de le faire fonctionner, réorganiser votre code 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>
```
Et votre CSS:
```
.strikethrough:checked + label {
  text-decoration:line-through
}
```
DÉMO.

InformationsquelleAutor LinkinTED

jQuery solution:

JS:

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

HTML:

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

InformationsquelleAutor odedta

Cela a fonctionné pour moi.

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

InformationsquelleAutor Faheem

Vous devez vous connecter pour publier un commentaire.