如何禁用/有一个复选框启用输入字段

当前代码：如何禁用/有一个复选框启用输入字段

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

我如何让这个检查“正在进行”复选框禁用“大限”输入字段？提前致谢。

来源

2016-11-23 Jake B

最好的办法是使用JavaScript – Magrangs

你能举一个例子我会怎么做呢？ –

@JakeB检查了我的答案，它是与JS和你使用的'截止日期'的div作为'id'这造成了问题 –

使用jQuery将是最简单的方式在我看来

$('#ongoing').change(function() { 
    if(this.checked) { 
    $('#deadline').prop('disabled',true); 
    } else { 
    $('#deadline').prop('disabled',false); 
    } 
});

来源

2016-11-23 11:19:55

这没有标签jQuery。 –

作者似乎在寻找解决方案。纯HTML不是解决方案。你不应该为此而投票。 –

我已经同意了，并删除了downvote。 '：）' –

你可以使用jQuery这个......你的代码将作为后续

$('#ongoing').change(function() { 
      if($(this).is(":checked")) { 
       $('#deadline').prop('disabled',false); 
      } 
      else 
    { $('#deadline').prop('disabled',true);} 
     });

来源

2016-11-23 11:19:00 Sameer

这没有用jQuery标记。 –

这样？这个答案是否正确 – Sameer

错......'：）'但是如果jQuery，它是正确的。 –

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

来源

2016-11-23 11:20:55

伴侣，我试过这个。但是这真的有用吗？因为我无法使它工作。看到我的答案，如果你能看到它。 –

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

来源

2016-11-23 11:23:22 MajidAlahevrdi

比提供一个更更好，更快的解决方案是：

$('#ongoing').change(function() { 
    $('#deadline').prop('disabled', this.checked); 
});

来源

2016-11-23 11:35:33

如何禁用/有一个复选框启用输入字段

回答

相关问题