如何禁用/有一个复选框启用输入字段
当前代码:如何禁用/有一个复选框启用输入字段
<form>
<div class="form-group" id="deadline" >
<input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
<input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
<label for="ongoing">Ongoing</label>
</div>
</form>
我如何让这个检查“正在进行”复选框禁用“大限”输入字段? 提前致谢。
使用jQuery将是最简单的方式在我看来
$('#ongoing').change(function() {
if(this.checked) {
$('#deadline').prop('disabled',true);
} else {
$('#deadline').prop('disabled',false);
}
});
这没有标签jQuery。 –
作者似乎在寻找解决方案。纯HTML不是解决方案。你不应该为此而投票。 –
我已经同意了,并删除了downvote。 ':)' –
你可以使用jQuery这个......你的代码将作为后续
$('#ongoing').change(function() {
if($(this).is(":checked")) {
$('#deadline').prop('disabled',false);
}
else
{ $('#deadline').prop('disabled',true);}
});
添加onclick
事件和调用功能如下所示:并删除此分区的ID <div class="form-group" id="deadline" >
,因为您正在使用相同的ID字段。
<html>
<script>
var disabled=0;
function disableEnableField(){
if(disabled==0){ //disable
document.getElementById('deadline').disabled = true;
disabled=1;
}
else{ //enable again
document.getElementById('deadline').disabled = false;
disabled=0;
}
}
</script>
<form>
<div class="form-group" >
<input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
<input type="checkbox" value="ongoing" onclick="disableEnableField()" name="Ongoing" id="ongoing" >
<label >Ongoing</label>
</div>
</form>
</html>
伴侣,我试过这个。但是这真的有用吗?因为我无法使它工作。看到我的答案,如果你能看到它。 –
@PraveenKumar它正在工作...检查我更新的答案..以前没有工作,因为重复的ID –
请使用jQuery或JavaScript
<form>
<div class="form-group" id="deadline" >
<input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
<input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
<label for="ongoing">Ongoing</label>
</div>
</form>
<script>
$("#ongoing).change(function(){
if($(this).is(':checked')
{
$('#deadline').attr('disabled','disabled');
}
else{
$('#deadline').removeAttr('disabled');
}
});
<script>
比提供一个更更好,更快的解决方案是:
$('#ongoing').change(function() {
$('#deadline').prop('disabled', this.checked);
});
最好的办法是使用JavaScript – Magrangs
你能举一个例子我会怎么做呢? –
@JakeB检查了我的答案,它是与JS和你使用的'截止日期'的div作为'id'这造成了问题 –