javascript - 如果选中复选框，则激活字段-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 15:26:44

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

当复选框被选中时，类从 class="ui slider checkbox " 更改为 class="ui slider checkbox selected"。要激活文本输入，我需要将 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>

最佳答案

试试这个:

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