2017-10-16 35 views
0

我是初学者,需要一些帮助。在我的代码中,我使用jQuery和Semantic-ui。我尝试激活文本输入后,我检查复选框输入。如果选中复选框,请激活字段

当复选框被选中时,类别从class="ui slider checkbox "更改为class="ui slider checkbox checked"。 要激活文本输入,我需要将class="disabled field"更改为class =“field”。

我特地到以下资源:

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

+0

使用标识为要更改和使用jQuery的ID选择器语法股利。 –

回答

0

试试这个:

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

对不起,迟到了。 – Lucian

+0

如果这解决了你的问题,然后通过点击接受按钮 – fatih

+0

接受我的答案我有一点问题。在我的代码存在的字段类中,您的解决方案也会影响该类。 https://www.w3schools.com/code/tryit.asp?filename=FKVOPF6OEHSU 我想要的只是操纵“数据”(禁用字段)。 – Lucian

0

你不听任何变化到页面。您需要将该脚本包装在单击事件处理程序或更改事件处理程序中。

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