Question

我有这个现有功能：取消选中复选框后，它会显示ul部分

  <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>
       <li> <input type="submit" value="send"></li>
      </ul>
  </form>

JS：

function toggle(className, obj) {
        var $input = $(obj);

        if ($input.prop('checked'))
            $(className).hide();
        else $(className).show();
    }

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

Answer 1

你的功能将是这样的

  function toggle(className, obj) {
  var attr = false;
    if  (obj.is(':checked')){
        attr = true;
    }
    $("."+className+" li input").each(function(){
        $(this).prop('disabled', attr);
    });
}

但是在复选框中你必须删除点（.ship）cuase它会出错并为对象添加$ onclick =＆＃34; toggle（＆＃39; ship＆＃39;，$（this ））

Answer 2

删除属性？

$('.ship').find('input').removeAttr( "required");

或禁用输入？

$('.ship').find('input').prop('disabled', true);

两个

$('.ship').find('input').removeAttr( "required").prop('disabled', true);

像这样使用它们：

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

要处理由于在该点设置“required”而希望在页面启动时处理逻辑的情况，请从标记中删除处理程序，将其放入代码中然后触发它：

<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>
      <input type="submit" value="send">
    </li>
  </ul>
</form>

请参阅触发处理程序的最后一部分：

function toggle(className, obj) {
  var $input = $(obj);
  if ($input.prop('checked')) {
    console.log("checked");
    $(className).hide().find('input').removeAttr("required").prop('disabled', true);
  } else $(className).show().find('input').attr("required", true).prop('disabled', false);
}
$('#cb_ship').on('click change', function() {
  toggle('.ship', this);
}).trigger('change');

选中复选框时如何禁用html必需的验证？

2 个答案: