如果选中了一个复选框，请激活一个字段答案

【问题标题】：If a checkbox is checked, activate a field如果选中了一个复选框，请激活一个字段
【发布时间】：2017-10-16 16:21:52
【问题描述】：

我是初学者，我需要一些帮助。在我的代码中，我使用 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>

【问题讨论】：

为你想改变的 div 使用一个 id 并使用 jQuery id-selector 语法。

标签： javascript jquery checkbox semantic-ui

【解决方案1】：

试试这个：

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

【讨论】：

抱歉迟到了。
如果这能解决您的问题，请点击接受按钮接受我的回答
我有个小问题。在我的代码中存在字段类，您的解决方案也会影响该类。 w3schools.com/code/tryit.asp?filename=FKVOPF6OEHSU 我想要的是只操作“数据”（禁用字段）。
嗨@Lucian，我不能完全理解你的问题（你的问题），你能帮我更清楚地描述一下吗？
好的。我有一个表单，它有 10 个字段，5 个始终处于活动状态，5 个处于非活动状态，当我单击我的复选框时，必须在活动字段（5 个非活动字段）中打开，反之亦然。问题是我不知道如何从 Sematic UI 操作这些类。希望现在清楚了，我很抱歉造成误解。

【解决方案2】：

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

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

【讨论】：