jQuery：如果字段为空或未选中复选框，则禁用提交按钮

Question

这是我第一次使用jQuery，我需要你的帮助，因为我没有克服自己想要的东西。

我有一个文档表，每个文档都有一个复选框，以便选择或不选择它。

我还有一个字段，其中一个用户设置了一个新年以便在之后修改文件名。

我有这个过程：

1. 默认情况下，提交按钮是禁用的
2. 要激活提交按钮，用户必须选中一个复选框并且写新年
3. 完成第 2 步后，如果我删除年份或取消选中该复选框，则必须禁用提交按钮

这是我的 javascript 部分（别忘了，这是我的第一次）：

<script type="application/javascript">

$(document).ready(function(){
    $('#DocumentButton').attr('disabled',true);
    $('#year').keyup(function(){
        // if field year is not empty and checkbox is checked
        if($(this).val().length !=0 && $('.fakeRadio').is(':checked'))
            $('#DocumentButton').attr('disabled', false);
        // if field year is empty or checkbox isn't checked
        else if ($(this).val().length =0 || $('.fakeRadio').is(':checked')==false)
            $('#DocumentButton').attr('disabled',true);
    })
});

   // Simulate Checkbox as Radiobox
   $(document).ready(function(){
      $(".fakeRadio").click(function(){
      var wasChecked = !$(this).prop("checked");
      $(".fakeRadio").prop( "checked", false );
      $(this).prop("checked", (!wasChecked) ? true : false );
      });
    });

  </script>

以及相应的 HTML 部分：

<div class="col-md-offset-1 col-md-5">
  <h4> {% trans "List of documents:" %} </h4>
  <form action="" method="POST"> {% csrf_token %}
    <table id="DocumentTable" class="table table-bordered table-striped table-condensed table_model"
           style="width: 160%;">
      <thead>
      <tr>
        <th style="width: 10%;">Choice</th>
        <th>Document title</th>
      </tr>
      </thead>
      <tbody>
      {% for document in query_document %}
        <tr>
          <td><input type="checkbox" class="fakeRadio" id="DocumentCheckBox" name="DocumentChoice" value="{{ document.id }}"></td>
          <td>{{ document.title }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

    <input type="text" id="year" name="q1year" placeholder="Set new year" value="{{ request.get.q1year }}">
    <button class="btn btn-default" id="DocumentButton" type="submit" name="UpdateDocument">{% trans "Submit" %}</button>
  </form>
</div>

到目前为止，该过程在第 1 步和第 2 步中运行良好，但如果我取消选中该复选框，则不会。

你能帮我解释一下我的代码中有什么错误吗？

Answer 1

HTML5 验证可以为您做到这一点。不需要 JavaScript。只需将required 属性添加到元素即可。

<form>
  <label>

  <label for="name">name</label><input id="name" required />
  <br/>
  <input type="checkbox" required name="terms"> I accept the Terms and Conditions
  </label>
  <br/>

  <input type="submit">
</form>

但是如果你想用 JavaScript 来做这件事，你可以用一种方法来做这两个检查。用一种方法进行所有检查比试图弄清楚如何对每个输入进行单独检查更容易。

function checkValid () {
  var cbChecked = $("#cb").is(":checked");  // check if checked
  var hasText = $("#name").val().length > 0;  // check if it has text
  
  $("#btnSubmit").prop("disabled", !cbChecked || !hasText);
}

$( function () {
  checkValid(); // run it for the first time
  $("#cb").on("change", checkValid);  // bind checkbox
  $("#name").on("input", checkValid)  // bind textbox
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>

  <label for="name">name</label><input id="name" />
  <br/>
  <input id="cb" type="checkbox" name="terms"> I accept the Terms and Conditions
  </label>
  <br/>

  <input type="submit" id="btnSubmit">
</form>

如果你有多个复选框并且只需要一个，那么你需要使用 JavaScript

function checkValid () {
  var cbChecked = $(".cb:checked").length > 0;  // check if at least one checked
  var hasText = $("#name").val().length > 0;  // check if it has text
  
  $("#btnSubmit").prop("disabled", !cbChecked || !hasText);
}

$( function () {
  checkValid(); // run it for the first time
  $(".cb").on("change", checkValid);  // bind checkboxesvia classname
  $("#name").on("input", checkValid)  // bind textbox
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>

  <label for="name">name</label><input id="name" />
  <br/>
  <label>
  <input class="cb" type="checkbox" name="terms"> One
  </label>
  <label>
  <input class="cb" type="checkbox" name="terms"> Two
  </label>
  <label>
  <input class="cb" type="checkbox" name="terms"> Three
  </label>
  <br/>

  <input type="submit" id="btnSubmit">
</form>

Answer 2

试试这个：

$(function(){

  function Op(){
     if($("table :checked")[0] && $("#year").val())
             $("#DocumentButton").removeAttr("disabled");
     else $("#DocumentButton").attr("disabled", "");
  };

  $("table").on("change", ":checkbox", Op);
  $("#year").on("input", Op);

  Op(); 
});

check it online

---

你可以写更短的op函数：

$(function(){
    function Op(){
       $("#DocumentButton").prop("disabled", !($("table :checked")[0] && $("#year").val()));
    };
    $("table").on("change", ":checkbox", Op);
    $("#year").on("input", Op);

    Op(); 
});

Try this live!

提示：您可以在js 中执行所有操作（验证与否）。我在我的项目中总是使用这种方式，而且一切都非常好并且易于管理。也适用于所有浏览器版本。

Answer 3

你已经很接近了，试试这个：

$(document).ready(function(){
    $('#year').keyup(function(){
        if($(this).val().length > 0)
            if($('.fakeRadio:checked').length() > 0){
                 $('#DocumentButton').attr('disabled', false);
            }
        } else {
            $('#DocumentButton').attr('disabled', true);
        }
    });

    $('.fakeRadio').on('change', function(){
        var checked = $('.fakeRadio:checked').length();
        if(checked > 0 && $('#year').val().length > 0){
            $('#DocumentButton').attr('disabled', false);
        } else {
            $('#DocumentButton').attr('disabled', true);
        }
    });
});

Answer 4

问题是您只在input keyup 事件中检查有效性并禁用或禁用按钮，而不是在checkbox 的click 事件中。

您应该将有效性检查代码放在一个函数中，并在两个事件中调用它 -

$(document).ready(function(){
    $('#DocumentButton').attr('disabled',true);
    $('#year').keyup(function(){
        checkValidity();
    })
});

// Simulate Checkbox as Radiobox
$(document).ready(function(){
   $(".fakeRadio").click(function(){
      var wasChecked = !$(this).prop("checked");
      $(".fakeRadio").prop( "checked", false );
      $(this).prop("checked", (!wasChecked) ? true : false );

      checkValidity();
   });
});

function checkValidity() {
  // if field year is not empty and checkbox is checked
  if($('#year').val().length !=0 && $('.fakeRadio').is(':checked'))
      $('#DocumentButton').attr('disabled', false);
  // if field year is empty or checkbox isn't checked
  else if ($('#year').val().length =0 || $('.fakeRadio').is(':checked')==false)
      $('#DocumentButton').attr('disabled',true);
}

顺便说一句，不需要 2 个不同的 document.ready 呼叫。您可以将所有代码放在同一个中。

Answer 5

在初始加载页面提交按钮将被禁用，如果用户单击复选框（或）在输入字段中输入一些值，则按钮禁用将删除

   $(document).ready(function(){
      inputType();
      checkbox();
      $('#DocumentButton').attr('disabled',true); //Initial load of the page submit button will be disabled
    });

function inputType(){
        if($("#year").val() == ''){
           $('#DocumentButton').attr('disabled',true);
        }else{
           $('#DocumentButton').attr('disabled',false);
        }         
 }

function checkbox(){
    $('.fakeRadio').each(function () {
        if ($(this).prop('checked')==true){ 
           $('#DocumentButton').attr('disabled', false);
        }else{
           $('#DocumentButton').attr('disabled', true);
        }
    });
}

而不是为输入字段和复选框编写一个 onclick 和 onkeyup 函数

  <td><input type="checkbox" onclick="checkbox()" class="fakeRadio" id="DocumentCheckBox" name="DocumentChoice" value="{{ document.id }}"></td>

 <input type="text" onkeyup="inputType()" id="year" name="q1year" placeholder="Set new year" value="{{ request.get.q1year }}">