Question

我有一个带有复选框的表单，一旦点击它就会打开复选框的子列表。

比如说，如果你选中复选框“AntimicrobialProphylaxis”......它会删除一个带有4个其他选项的复选框子列表。如何使子列表成为必需项？

$(document).ready(function() {
  $("#AntimicrobialProphylaxis").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#AntimicrobialProphylaxisSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });

  $("#SkinPreparation").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#SkinPreparationSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });

  $("#HairRemoval").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#HairRemovalSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });

  $("#AutologousPlateletRichPlasmaApplication").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#AutologousPlateletRichPlasmaApplicationSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h3 class="QOE1">Quality of Evidence I</h3>
  <input id="AntimicrobialProphylaxis" name="selection" type="checkbox" value="1" />Antimicrobial Prophylaxis
  <br />

  <span id="AntimicrobialProphylaxisSub" style="display:none;">
  		   <input name="selection" type="checkbox" value="1" class="" /> Cefazolin<br />
  		   <input name="selection" type="checkbox" value="1" class="" /> Vancomycin<br />
  		   <input name="selection" type="checkbox" value="1" class="" /> Gentamicin<br />
    	   <input name="selection" type="checkbox" value="1" class="" /> Other<br />
    	   <textarea name="description" cols="80" rows="5"></textarea><br />
        </span>

  <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Skin Preparation
  <br />

  <span id="SkinPreparationSub" style="display:none;">
    	    <input name="selection" type="checkbox" value="1" />
            <span>Aqueous/alcohol based</span>

  <input name="selection" type="checkbox" value="1" /><span>Other</span>
  <br />
  <textarea name="description" cols="80" rows="5"></textarea>
  <br />
  </span>

  <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Surgical Hand Antisepsis
  <br />

  <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Parenteral Nutrition Timing
  <br />
</div>

代码允许子列表出现，但我无法使其成为必需。我尝试过使用jQuery中的.prop和所需的html属性。

Answer 1

根据您的评论：

如果您检查AntimicrobialProphylaxis，您还必须至少检查其中一个字段是为了提交表格

以下是使用jQuery验证表单字段的方法：

$(document).ready(function() {
  $("#form-submit").click(function(event) {
    var error = false;
    if ($('#AntimicrobialProphylaxis').is(':checked') && $('#AntimicrobialProphylaxisSub input:checked').length == 0) error = true;
    if ($('#SkinPreparation').is(':checked') && $('#SkinPreparationSub input:checked').length == 0) error = true;
    if (error) {
      event.preventDefault();
      alert('Error! Please check your form!');
    } else alert('No errors! Form will be submitted.');
  });

  $("#AntimicrobialProphylaxis").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#AntimicrobialProphylaxisSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });

  $("#SkinPreparation").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#SkinPreparationSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });

  $("#HairRemoval").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#HairRemovalSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });

  $("#AutologousPlateletRichPlasmaApplication").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#AutologousPlateletRichPlasmaApplicationSub").toggle(showOrHide);
    $('[name="description"]').toggleClass('required', showOrHide);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="QOE1">Quality of Evidence I</h3>
  <form id="my-form" method="post" action="">
    <input id="AntimicrobialProphylaxis" name="selection" type="checkbox" value="1" />Antimicrobial Prophylaxis
    <br />

    <span id="AntimicrobialProphylaxisSub" style="display:none;">
       <input name="selection" type="checkbox" value="1" class="" /> Cefazolin<br />
       <input name="selection" type="checkbox" value="1" class="" /> Vancomycin<br />
       <input name="selection" type="checkbox" value="1" class="" /> Gentamicin<br />
       <input name="selection" type="checkbox" value="1" class="" /> Other<br />
       <textarea name="description" cols="80" rows="5"></textarea><br />
    </span>

    <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Skin Preparation
    <br />

    <span id="SkinPreparationSub" style="display:none;">
        <input name="selection" type="checkbox" value="1" />
        <span>Aqueous/alcohol based</span>

    <input name="selection" type="checkbox" value="1" /><span>Other</span>
    <br />
    <textarea name="description" cols="80" rows="5"></textarea>
    <br />
    </span>

    <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Surgical Hand Antisepsis
    <br />

    <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Parenteral Nutrition Timing
    <br />
    <!-- Submit Button -->

    <button id="form-submit" type="submit">Submit</button>
  </form>
</div>

您还可以使用$('[name="description"]').prop('required', true);添加HTML输入required属性。

在你的情况下：

$(document).ready(function() {
  $("#AntimicrobialProphylaxis").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#AntimicrobialProphylaxisSub").toggle(showOrHide);
    $('[name="description"]').prop('required', showOrHide);
    $('#AntimicrobialProphylaxisSub > input').each(function() {
      $(this).prop('required', showOrHide);
    });
  });

  $("#SkinPreparation").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#SkinPreparationSub").toggle(showOrHide);
    $('[name="description"]').prop('required', showOrHide);
    $('#SkinPreparationSub > input').each(function() {
      $(this).prop('required', showOrHide);
    });
  });

  $("#HairRemoval").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#HairRemovalSub").toggle(showOrHide);
    $('[name="description"]').prop('required', showOrHide);
  });

  $("#AutologousPlateletRichPlasmaApplication").change(function() {
    var showOrHide = $(this).is(':checked');
    $("#AutologousPlateletRichPlasmaApplicationSub").toggle(showOrHide);
    $('[name="description"]').prop('required', showOrHide);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="QOE1">Quality of Evidence I</h3>
  <input id="AntimicrobialProphylaxis" name="selection" type="checkbox" value="1" />Antimicrobial Prophylaxis
  <br />

  <span id="AntimicrobialProphylaxisSub" style="display:none;">
       <input name="selection" type="checkbox" value="1" class="" /> Cefazolin<br />
       <input name="selection" type="checkbox" value="1" class="" /> Vancomycin<br />
       <input name="selection" type="checkbox" value="1" class="" /> Gentamicin<br />
       <input name="selection" type="checkbox" value="1" class="" /> Other<br />
       <textarea name="description" cols="80" rows="5"></textarea><br />
    </span>

  <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Skin Preparation
  <br />

  <span id="SkinPreparationSub" style="display:none;">
        <input name="selection" type="checkbox" value="1" />
        <span>Aqueous/alcohol based</span>

  <input name="selection" type="checkbox" value="1" /><span>Other</span>
  <br />
  <textarea name="description" cols="80" rows="5"></textarea>
  <br />
  </span>

  <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Surgical Hand Antisepsis
  <br />

  <input id="SkinPreparation" name="selection" type="checkbox" value="1" />Parenteral Nutrition Timing
  <br />
</div>

Answer 2

如果您要确保至少检查了一个项目，但是在提交表单之前，您需要确保每个项目都有多个项目。检查一个后，您需要从其他复选框中删除所需的属性，否则它们是提交表单所必需的。

您可以尝试这样的事情：

div{
    display:inline-block;
}

http://jsfiddle.net/7a12gb1p/

Answer 3

如果您检查AntimicrobialProphylaxis，您还必须至少检查其中一个字段是为了提交表格

根据您的需要，我认为您应该编写这样的函数来验证您的输入：

function isValidated() {
    var isValid = true;
    var isChecked = $("#AntimicrobialProphylaxis").is(":checked");
    if (isChecked) {
        isValid = false;
        var isSubChecked = $('#AntimicrobialProphylaxisSub > input:checked').length > 0;
        if (isSubChecked) {
            isValid = true;
        }
    }
    return isValid;
}

上面的函数强制用户检查子列表中的至少1个复选框，如果他们选中了AntimicrobialProphylaxis。查看JSFiddle处的完整代码。

选中复选框后必填字段

3 个答案: