Question

当前代码：

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

我该怎么做才能检查“正在进行”复选框禁用“截止日期”输入字段？提前谢谢。

Answer 1

请使用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>

Answer 2

你可以使用jQuery ...你的代码将如下 -

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

Answer 3

在我看来，使用jQuery是最简单的方法

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

Answer 4

添加onclick事件并调用如下函数：并删除此div <div class="form-group" id="deadline" >的ID，因为您对字段使用相同的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>

Answer 5

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

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

如何使用复选框禁用/启用输入字段

5 个答案: