如何勾選複選框時禁用HTML必需屬性？

Question

我有這樣的現有功能：的複選框被默認選中，當複選框是選中它會顯示ul部分

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

 <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部分內。所以，如果複選框被默認選中並且所需的屬性被禁用（我的問題），我可以繼續。

在JS

Answer 1

更簡單的方法，使用jQuery toggle - 注意我沒有用onclick - 保持js和html分開

UPDATE：取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>

Answer 2

，你可以不喜歡它：

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

而在JQuery的，你可以不喜歡它：

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

Answer 3

你的問題的工作示例：

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 4

下面的代碼小提琴可以幫助您解決問題：

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 5

你可以試試這個：

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

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

 
function checkboxStat(checkbox) { 
 
\t if(!$(checkbox).is(':checked')) { 
 
    \t $(':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>