Question

我有一个隐藏的div，它将包含一些HTML输入，其中一些需要作为表单的一部分。通过选中复选框可以看到div，代码如下所示：

＆＃13;

$(function() {
  var checkbox = $("#checkbox01");
  var hidden = $("#div01");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      hidden.show();
    } else {
      hidden.hide();
      $("#username").val("");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
<div id="div01">
  <input name="username" type="text" required>
</div>

＆＃13;

您可以在JSfiddle上看到代码正如您所见，当取消选中该复选框时隐藏div，并且在隐藏div时清除用户名（复选框未选中）。

如果选中复选框，如何才能将required添加到HTML ，这样当Jquery隐藏div时，用户无法提示输入值。 ..？

Answer 1

您可以将类型切换为hidden，这样就不再需要了

$("#checkbox01").on('change', function() {
    $("#div01").toggle(this.checked)
               .find('input').prop('type', this.checked ? 'text' : 'hidden')
               .val('');
    }).trigger('change');

$(function() {
  $("#checkbox01").on('change', function() {
    $("#div01").toggle(this.checked).find('input').prop('type', this.checked ? 'text' : 'hidden').val('');
  }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>
    <input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
  <div id="div01">
    <input name="username" type="text" required="required">
  </div>
  <input type="submit">
</form>

Answer 2

试试这个：（ JavaScript ）

$(function() {
  var checkbox = $("#checkbox01");
  var hidden = $("#div01");
  hidden.hide();
  checkbox.change(function() {

    if (checkbox.is(':checked')) {
      hidden.show();

      document.getElementById("username").required = true;
    } else {
      hidden.hide();
      $("#username").val("");
      document.getElementById("username").required = false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
<div id="div01">
  <input name="username" id="username" type="text">
</div>

<强>的jQuery

$("#username").prop('required',true);          //to add
$("#username").prop('required',false);         //to remove

Answer 3

在检查时添加必需属性，并在取消选中时将其删除。

    $(function() {
      var checkbox = $("#checkbox01");
      var hidden = $("#div01");
      hidden.hide();
      checkbox.change(function() {
        if (checkbox.is(':checked')) {
          hidden.show();
          $("#name").attr('required'); //add required attr
        } else {
          hidden.hide();
          $("#username").val("");
          $("#name").removeAttr('required'); // remove required attr
        }
      });
    });

这是你的小提琴https://jsfiddle.net/xj7ps2La/

Answer 4

每次显示时都可以使用.prop()添加必需的属性，并在每次隐藏时删除属性。

$(function() {
  var checkbox = $("#checkbox01");
  var hidden = $("#div01");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      hidden.show();
      $('#username').prop('required', true); //to add required
    } else {
      hidden.hide();
      $("#username").val("");
      $('#username').prop('required', false); //to remove required
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
<div id="div01">
  <input name="username" type="text" required>
</div>

Answer 5

将你的js更新为：

    $(function() {
          var checkbox = $("#checkbox01");
          var hidden = $("#div01");
          hidden.hide();
          checkbox.change(function() {
            if (checkbox.is(':checked')) {
              checkbox.attr("required",true);
              hidden.show();
            } else {
              hidden.hide();
              checkbox.attr("required",false);
              $("#username").val("");
            }
          });
        });

选中复选框时添加HTML输入所需

5 个答案: