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

【问题标题】：How to disable HTML required attribute when checkbox is checked?选中复选框时如何禁用 HTML 必需属性？
【发布时间】：2016-09-06 07:16:07
【问题描述】：

我有这个现有的功能：复选框默认选中，当复选框未选中时，它将显示ul部分

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

      <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>

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

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

【问题讨论】：

标签： javascript html

【解决方案1】：

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

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

更新 2：保持required 处于打开状态，并按照操作所说查看复选框的状态

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>

【讨论】：

是的，我看到了，但是当表单隐藏时提交是隐藏的，所以不确定它是如何相关的
有点有趣，但如果需要更早的字段，OP 可能无法继续下一个表单或步骤...
@DarrenSweeney 很抱歉造成混淆。我更新了我的问题。提交 btn 不得属于 ul 部分。
@vancabrera 更新了我的答案——我想你现在想做什么

【解决方案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');
   }
}

【讨论】：

它需要禁用所有必填字段而不单击复选框，因为该复选框默认选中。所以，我可以提交表单了。
您可以在输入标签中添加“禁用”，如下所示：

【解决方案3】：

在 JS 中你可以这样做：

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

在 JQuery 中，您可以这样做：

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

【讨论】：

【解决方案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/ 的小提琴

【讨论】：

它需要禁用所有必填字段而不单击复选框，因为该复选框默认选中。我更新了我的代码，按钮不能在ul 部分内。因此，如果首先禁用了所需的属性，我可以提交表单。

【解决方案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>

【讨论】：