Si une case est cochée, activez un champ

Je suis débutant et j'ai besoin d'aide. Dans mon code j'utilise jQuery et Semantic-ui. J'essaie d'activer la saisie de texte après avoir coché la case à cocher.Si une case est cochée, activez un champ

Lorsque la case est cochée, passez de class="ui slider checkbox " à class="ui slider checkbox checked". Pour activer la saisie de texte, je dois modifier class="disabled field" à class = "field".

J'ai regardé dans les ressources suivantes:

<html> 
 
    <head> 
 
    <title> ASD</title> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="inline field"> 
 
    <div class="ui slider checkbox"> 
 
     <input type="checkbox" tabindex="0" class="hidden" /> 
 
     <label>Imprumutata</label> 
 
    </div> 
 
    </div> 
 
     
 
    <div class="ui equal width form"> 
 
    <div class="disabled field"> 
 
     <label>Data</label> 
 
     <input placeholder="Data" type="text" disabled="" tabindex="-1" /> 
 
    </div> 
 
    </div> 
 
    <script> 
 
    $('.ui.accordion').accordion(); 
 
    </script> 
 
    <script> 
 
    $('.ui.dropdown').dropdown(); 
 
    </script> 
 
    <script> 
 
    $('.ui.checkbox').checkbox(); 
 
    </script> 
 
     
 
     
 
     
 
     
 
    // this is what i tried 
 
    <script> 
 
    if($(".ui.checkbox").is('.ui.checkbox.checked')) 
 
     $(".ui.disabled.field").addClass(".ui.field"); // checked 
 
    else 
 
     $(".ui.disabled.field").addClass(".ui.disabled.field"); // unchecked 
 
    </script> 
 
</body> 
 
</html>

Source

2017-10-16 Lucian

Utilisez un identifiant pour la div que vous voulez modifier et utiliser la syntaxe id-sélecteur jQuery. –

Essayez ceci:

<html> 
<head> 
<title> ASD</title> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"> 
<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script> 
</head> 
<body> 
<div class="inline field"> 
<div class="ui slider checkbox"> 
    <input type="checkbox" tabindex="0" class="hidden" /> 
    <label>Imprumutata</label> 
</div> 
</div> 

<div class="ui equal width form"> 
<div class="disabled field"> 
    <label>Data</label> 
    <input placeholder="Data" type="text" disabled="" tabindex="-1" /> 
</div> 
</div> 
<script> 
    $('.ui.accordion').accordion(); 
</script> 
<script> 
    $('.ui.dropdown').dropdown(); 
</script> 
<script> 
    $('.ui.checkbox').checkbox(); 
</script> 
<script> 
    $(".ui.checkbox").click(function() { 
     var fieldClass = $(".form .field").attr('class'); 
     if(fieldClass == "disabled field"){ 
      $(".form .field").attr('class', 'field'); 
     }else{ 
      $(".form .field").attr('class', 'disabled field'); 
     } 
    }); 
</script> 
</body> 
</html>

Source

2017-10-16 17:14:45 fatih

Désolé pour la fin. – Lucian

Si cela résout votre problème, alors acceptez ma réponse en cliquant sur le bouton Accepter – fatih

J'ai un petit problème. Dans mon code existe la classe de champ et votre solution affecte également cette classe. https://www.w3schools.com/code/tryit.asp?filename=FKVOPF6OEHSU Ce que je veux est de manipuler seulement "Data" (désactiver le champ). – Lucian

Vous n'êtes pas d'écoute pour tout changement à la page. Vous devez placer ce script dans un gestionnaire d'événements click ou un gestionnaire d'événements change.

$(".ui.checkbox").click(function() { // or .change 
    // Your script 
});

Source

2017-10-16 16:30:20 Josherwoodev

Si une case est cochée, activez un champ

Répondre

Questions connexes