Question

我有以下代码：

<html>
<body>

<form action="">
<input type="checkbox" id="Condition" value="Conditions">Conditions<br>
<input type="text" id="txtAgree" disabled>
<input type="submit" name="generate" id="generate" disabled>
</form>

</body>

我在jquery中编写了以下方法

if ($("#Condition").is(":checked")) {
                 $('#txtAgree').prop('disabled',false);
                         $('#txtAgree').keyup(function () {
                             if ($(this).val().length != 0) {
                                  $('#generate').prop('disabled', false);

                             }
                             else {
                                 $('#generate').prop('disabled', true);
                             }
                         })
                     }
                     $('#generate').prop('disabled', false);
                 }

但是通过选中复选框本身可以启用该按钮。要求是选中复选框，启用文本框，如果文本框不为空，则只应启用按钮。

Answer 1

适用于您的简短版本：

$('#Condition,#txtAgree').on('change keyup', function() {
  $('#txtAgree').prop('disabled', !$('#Condition:checked').length);
  $('#generate').prop('disabled', !($('#Condition:checked').length && $('#txtAgree').val()));
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/mt4uokvx/

它会同时监听两个控件上的keyup和change事件，然后根据复选框和基于复选框和编辑控件的按钮启用文本输入。从理论上讲，它只需要检查文本的长度，但这也需要取消选中以清除文本：）

Answer 2

您的文本框没有ID txtAgree。添加此内容并尝试以下内容。希望这会对你有所帮助。

＆＃13;

$('#Condition').change(function () {
    var txtAgree = $('#txtAgree');
    var generate = $('#generate');

    if (this.checked) {
        txtAgree.prop('disabled', false);
      
        if (txtAgree.val())
            generate.prop('disabled', false);
        else
            generate.prop('disabled', true);
    } else {
        txtAgree.prop('disabled', true);
        generate.prop('disabled', true);
    }
});

$('#txtAgree').keyup(function () {
    $('#Condition').change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="Condition" value="Conditions">Conditions<br>
<input type="text" id="txtAgree" disabled>
<input type="submit" name="generate" id="generate" disabled>

＆＃13;

Answer 3

你可以组合这些陈述所以，

function checkinput(){
   if($("#Condition").is(":checked") && $('#txtAgree').val() != ""){
                 $('#generate').prop('disabled', false);
   } 
   else{
                 $('#generate').prop('disabled', true);
   }
}

然后

$("#txtAgree").keyup(function(){ 
    checkinput();
});

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

});

编辑：如果未满足条件，则重新禁用编辑2：适合编辑的问题

Answer 4

另一个解决方案是结合事件和元素，如：

＆＃13;

$('#Condition, #txtAgree').on('change keyup', function() {
  if ($('#Condition').is(':checked')) {
    $('#txtAgree').prop('disabled', false);
    if ($('#txtAgree').val().length != 0) {
      $('#generate').prop('disabled', false);
    } else {
      $('#generate').prop('disabled', true);
    }
  } else {
    $('#txtAgree').prop('disabled', true);
  }
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>


<form action="">
    <input type="checkbox" id="Condition" value="Conditions">Conditions<br>
    <input type="text" id="txtAgree" disabled>
    <input type="submit" name="generate" id="generate" disabled>
</form>

＆＃13;

如何根据复选框和文本框内容启用按钮

4 个答案: