如果选中复选框,请激活字段
问题描述:
我是初学者,需要一些帮助。在我的代码中,我使用jQuery和Semantic-ui。我尝试激活文本输入后,我检查复选框输入。如果选中复选框,请激活字段
当复选框被选中时,类别从class="ui slider checkbox "
更改为class="ui slider checkbox checked"
。 要激活文本输入,我需要将class="disabled field"
更改为class =“field”。
我特地到以下资源:
-
https://semantic-ui.com/modules/checkbox.html#/usage
- https://semantic-ui.com/collections/form.html#disabled-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>
答
你不听任何变化到页面。您需要将该脚本包装在单击事件处理程序或更改事件处理程序中。
$(".ui.checkbox").click(function() { // or .change
// Your script
});
使用标识为要更改和使用jQuery的ID选择器语法股利。 –