Question

我正在处理一个表格，当用户选中一个复选框时，我希望该表格向用户显示其他字段。我正在尝试使用jquery实现任务，但它不能按预期工作。我想在页面加载时隐藏文本字段，当用户单击复选框时，显示第一个输入字段，当再次单击复选框时，显示最终输入字段，并且禁用复选框 。

请协助？

布局

//Checkbox field
    <div class="check-now" style="width: 100%;">
    <label class="spouse-me">
    <h1 class="pumba">Enter next of kin</h1>
    <input type="checkbox">
    <span class="checkmark" id="next-kin"></span>
    </label>
    </div>

点击上方复选框后要显示的其他字段

<div class="form-line registar2 love">
      <input type="text-area" name="next-kin" class="form-input" required>
      <label>First Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

    <div class="form-line registar2 move">
      <input type="text-area" name="next-kin" class="form-input" required>
      <label>Last Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

jQuery代码

$(window).load(function(){
    $('input[name="next-kin"]').hide();

    //show it when the checkbox is clicked
    $('input[id="next-kin"]').on('click', function(){
    if ( $(this).prop('checked') ) {
        $('input[name="next-kin"]').fadeIn();
    } 
    else {
        $('input[name="next-kin"]').hide();
    }
});
});

Answer 1

您可以如下修改您的jquery代码。我使用jQuery 2.1.1，但没有更改HTML部分。

$(document).ready(function(){
    var checked = false;
    $(".form-line").hide();
	$("#myCheckBox").on("change", function(){
    	if(!checked)
    	{
      	  $(".form-line").show();
          checked = true;
          $("#myCheckBox").attr("disabled","true");// disabled the checkbox
       }
       else{
      	  $(".form-line").hide();
          checked = false;
       }
    });
});

<div class="check-now" style="width: 100%;">
    <label class="spouse-me">
    <h1 class="pumba">Enter next of kin</h1>
    <input type="checkbox" id="myCheckBox">
    <span class="checkmark" id="next-kin"></span>
    </label>
</div>
    
<div class="form-line registar2 love">
      <input type="text-area" name="next-kin" class="form-input" required>
      <label>First Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
</div>   

<div class="form-line registar2 move">
    <input type="text-area" name="next-kin" class="form-input" required>
      <label>Last Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>  
</div>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

单击复选框将显示字段，而未选中的将隐藏字段。请参阅运行代码段

Answer 2

您的选择器错误。我向registrar2 div添加了hidden属性，这在窗口加载时将其隐藏。

现在，只需选中ID为'checkboxkin'的复选框，就可以显示它们了！

使用ID和类而不是jQuery中的名称属性总是更容易。

$(window).load(function(){
    //show it when the checkbox is clicked
    $('#checkboxkin').on('click', function(){
    if ( $(this).prop('checked') ) {
        $('.registar2').fadeIn();
    } 
    else {
        $('.registar2').hide();
    }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="check-now" style="width: 100%;">
    <label class="spouse-me">
    <h1 class="pumba">Enter next of kin</h1>
    <input type="checkbox" id="checkboxkin">
    <span class="checkmark" id="next-kin"></span>
    </label>
    </div>
    
    <div class="form-line registar2 love" hidden>
      <input type="text-area" name="next-kin" class="form-input" required >
      <label>First Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

    <div class="form-line registar2 move" hidden>
      <input type="text-area" name="next-kin" class="form-input" required >
      <label>Last Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

Answer 3

似乎您将输入ID next-kin放到了一个跨度上。请更改以下

 <input type="checkbox">
 <span class="checkmark" id="next-kin"></span>

收件人

 <input type="checkbox" id="next-kin">
 <span class="checkmark" ></span>

DEMO HERE

希望这会有所帮助

更新

如果需要禁用此复选框，请在$(this).prop('disabled',true);内添加if ( $(this).prop('checked') ) {。检查更新的小提琴以供参考。

UPDATED FIDDLE

选中复选框时显示其他字段时出现问题

3 个答案: