Wenn ein Kontrollkästchen aktiviert ist, aktivieren Sie ein Feld

Ich bin ein Anfänger und ich brauche Hilfe. In meinem Code verwende ich jQuery und Semantic-ui. Ich versuche, die Texteingabe zu aktivieren, nachdem ich die Checkbox-Eingabe überprüft habe.Wenn ein Kontrollkästchen aktiviert ist, aktivieren Sie ein Feld

Wenn das Kontrollkästchen aktiviert ist, ändern Sie die Klasse von class="ui slider checkbox " in class="ui slider checkbox checked". Um die Texteingabe zu aktivieren, muss ich class="disabled field" in class = "field" ändern.

Ich habe in den folgenden Ressourcen sah:

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

Quelle

2017-10-16 Lucian

Verwenden Sie eine ID für das div Sie die jQuery-ID-Selektor Syntax ändern und zu verwenden. –

Try this:

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

Quelle

2017-10-16 17:14:45 fatih

Sorry für spät. – Lucian

Wenn dies Ihr Problem lösen, dann akzeptieren Sie meine Antwort, indem Sie auf die Schaltfläche akzeptieren – fatih

Ich habe ein kleines Problem. In meinem Code existiert eine Feldklasse und Ihre Lösung wirkt sich auch auf diese Klasse aus. https://www.w3schools.com/code/tryit.asp?filename=FKVOPF6OEHSU Was ich will, ist nur zu manipulieren "Daten" (Feld deaktivieren). – Lucian

Sie sind nicht für alle Änderungen hören auf die Seite. Sie müssen dieses Skript in einen Click-Ereignishandler oder einen Change-Event-Handler einfügen.

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

Quelle

2017-10-16 16:30:20 Josherwoodev

Wenn ein Kontrollkästchen aktiviert ist, aktivieren Sie ein Feld

Antwort

Verwandte Themen