Question

我有以下功能：默认情况下会选中此复选框，取消选中复选框后会显示ul部分

＆＃13;

    function toggle(className, obj) {
    	    var $input = $(obj);
    
    	    if ($input.prop('checked'))
    			$(className).hide();
    	    else $(className).show();
    	}

＆＃13;

      <input type="checkbox" id="cb_ship" onclick="toggle('.ship', this)" checked="checked">
    
      <label for="cb_ship" >Same as account name</label>
    
     <form method="post">  
          <ul class="ship" style="display:none;">
           <li> fname <input type="text" name="fname" required></li>
           <li> lname <input type="text" name="lname" required></li>
           <li> age <input type="text" name="age" required></li>
           <li> address <input type="text" name="address" required></li>
           <li> city <input type="text" name="city" required></li>
          </ul>

           <input type="submit" value="send">
      </form>

＆＃13;

我想要做的事情：如果默认选中该复选框，则应禁用所有必需属性，而不单击复选框。所以，我可以提交表格。

已编辑：对此感到困惑。我更新了我的问题。提交按钮不得位于ul部分内。因此，如果默认选中复选框并禁用所需属性（我的问题），我可以继续。

Answer 1

更简单的方法，使用jquery toggle - 请注意我没有使用onclick - 保持js和html分开

更新：关闭required直到需要，js会添加

更新2 ：保持required开启，只是看着复选框的状态，如op所说

var el = $('.ship');
if ($('#cb_ship').is(":checked")) {
    el.find('input').prop({
        required: false
    });
}
$('#cb_ship').on('change', function() {

    el.toggle();

    if (el.is(":visible") == true) {
        el.find('input').prop({
            required: true
        });
    } else {
        el.find('input').prop({
            required: false
        });
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" id="cb_ship" checked="checked">

<label for="cb_ship" >Same as account name</label>

<form method="post">  
    <ul class="ship" style="display:none;">
       <li> fname <input type="text" name="fname" required></li>
       <li> lname <input type="text" name="lname" required></li>
       <li> age <input type="text" name="age" required></li>
       <li> address <input type="text" name="address" required></li>
       <li> city <input type="text" name="city" required></li>
       <li> </li>
    </ul>
    <input type="submit" value="send">
</form>

Answer 2

以下代码可能有助于解决您的问题：

JS：

function toggle(className, obj) {
   var $input = $(obj);
   if ($input.prop('checked')) {
      $(className).hide();
      $(className).attr('disabled','disabled');
      $(className).removeAttr('required');
   }
   else {
     $(className).show();
     $(className).addAttr('required');
     $(className).removeAttr('disabled');
   }
}

Answer 3

在JS中你可以这样做：

document.getElementById("field_id").required = true;

在JQuery中，您可以这样做：

 $('#field_id').attr('required', true)

Answer 4

问题的工作示例：

<强> HTML：

<input type="checkbox" id="cb_ship"checked="checked">

  <label for="cb_ship" >Same as account name</label>

 <form method="post">  
      <ul class="ship">
       <li> fname <input type="text" name="fname" required></li>
       <li> lname <input type="text" name="lname" required></li>
       <li> age <input type="text" name="age" required></li>
       <li> address <input type="text" name="address" required></li>
       <li> city <input type="text" name="city" required></li>
       <li> <input type="submit" value="send"></li>
      </ul>
  </form>

<强>使用Javascript：

$(document).ready(function(){
    var checkbox = $('#cb_ship');
  checkboxStat(checkbox);
});

$('#cb_ship').click(function(){
    checkboxStat($(this));
});

function checkboxStat(checkbox) {
    if(!$(checkbox).is(':checked')) {
    $('.ship').show();
    $('.ship').find('input').prop({disabled: false});
  } else {
    $('.ship').hide();
    $('.ship').find('input').prop({disabled: true});
  }
}

见https://jsfiddle.net/67u62Lkq/

的小提琴

Answer 5

你可以试试这个：

$(document).ready(function(){
	var checkbox = $('#cb_ship');
  checkboxStat(checkbox);
});

$('#cb_ship').click(function(){
	checkboxStat($(this));
});

function checkboxStat(checkbox) {
	if(!$(checkbox).is(':checked')) {
  	$(':input[required]:visible').prop({disabled: false});
  } else {
    $(':input[required]:visible').prop({disabled: true});
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb_ship"checked="checked">

  <label for="cb_ship" >Same as account name</label>

 <form method="post">  
      <ul class="ship">
       <li> fname <input type="text" name="fname" required></li>
       <li> lname <input type="text" name="lname" required></li>
       <li> age <input type="text" name="age" required></li>
       <li> address <input type="text" name="address" required></li>
       <li> city <input type="text" name="city" required></li>
       <li> <input type="submit" value="send"></li>
      </ul>
  </form>

选中复选框时如何禁用HTML必需属性？

5 个答案: