Question

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

选中复选框时，课程从class="ui slider checkbox "更改为class="ui slider checkbox checked"。要激活文字输入，我需要将class="disabled field"更改为class =＆＃34; field＆＃34;。

我查看了以下资源：

＆＃13;

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

＆＃13;

Answer 1

您没有收听对页面的任何更改。您需要将该脚本包装在单击事件处理程序或更改事件处理程序中。

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

Answer 2

试试这个：

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

如果选中复选框，则激活字段

2 个答案: