具有相同名稱的多個複選框的必需屬性？

Question

我有一個複選框的列表屬性，我需要驗證其中至少有一個已被選中。

但是，當我在所有這些html5屬性「required」上使用時，瀏覽器（chrome & ff）不允許我提交表單，除非所有這些表單都被選中。

示例代碼：

<label for="a-0">a-0</label> 
<input type="checkbox" name="q-8" id="a-0" required /> 
<label for="a-1">a-1</label> 
<input type="checkbox" name="q-8" id="a-1" required /> 
<label for="a-2">a-2</label> 
<input type="checkbox" name="q-8" id="a-2" required /> 

當使用相同的無線電輸入，形式按預期方式工作（如果其中一個選項被選擇的形式將驗證）

根據Joe Hopfgartner（誰聲稱引用html5規範），假定的行爲是：

對於複選框，只有當一個或多個具有該名稱的複選框在在形式被檢查。

對於單選按鈕，只有當該無線電組中的一個單選按鈕被選中時，才能滿足所需的屬性。

我做錯了什麼，或者這是一個瀏覽器錯誤（在這兩個鉻& ff）？

Answer 1

對不起，現在我已經讀了你期望的更好，所以我正在更新答案。

基於來自W3C的HTML5 Specs，沒有什麼是錯的。我創建this JSFiddle test，它的表現的基礎上正確的規格（基於規格的瀏覽器，如Chrome 11和Firefox 4）：

<form> 
 
    <input type="checkbox" name="q" id="a-0" required autofocus> 
 
    <label for="a-0">a-1</label> 
 
    <br> 
 

 
    <input type="checkbox" name="q" id="a-1" required> 
 
    <label for="a-1">a-2</label> 
 
    <br> 
 

 
    <input type="checkbox" name="q" id="a-2" required> 
 
    <label for="a-2">a-3</label> 
 
    <br> 
 

 
    <input type="submit"> 
 
</form>

我同意，這不是非常有用（實際上很多人都在W3C's mailing lists中抱怨過）。

但瀏覽器只是遵循標準的建議，這是正確的。該標準有點誤導性，但我們在實踐中無法做任何事情。 您可以隨時使用JavaScript進行表單驗證，雖然就像一些很棒的jQuery驗證插件。

另一種方法是選擇一個polyfill，它可以使（幾乎）所有瀏覽器都正確地解釋表單驗證。

Answer 2

我有同樣的問題，我的解決方案是必要的屬性適用於所有元素

<input type="checkbox" name="checkin_days[]" required="required" value="0" /><span class="w">S</span> 
<input type="checkbox" name="checkin_days[]" required="required" value="1" /><span class="w">M</span> 
<input type="checkbox" name="checkin_days[]" required="required" value="2" /><span class="w">T</span> 
<input type="checkbox" name="checkin_days[]" required="required" value="3" /><span class="w">W</span> 
<input type="checkbox" name="checkin_days[]" required="required" value="4" /><span class="w">T</span> 
<input type="checkbox" name="checkin_days[]" required="required" value="5" /><span class="w">F</span> 
<input type="checkbox" name="checkin_days[]" required="required" value="6" /><span class="w">S</span> 

當用戶檢查的內容之一我刪除所有元素所需的屬性：

var $checkedCheckboxes = $('#recurrent_checkin :checkbox[name="checkin_days[]"]:checked'), 
    $checkboxes = $('#recurrent_checkin :checkbox[name="checkin_days[]"]'); 

$checkboxes.click(function() { 

if($checkedCheckboxes.length) { 
     $checkboxes.removeAttr('required'); 
    } else { 
     $checkboxes.attr('required', 'required'); 
    } 

}); 

Answer 3

有點jQuery修復：

$(function(){ 
    var chbxs = $(':checkbox[required]'); 
    var namedChbxs = {}; 
    chbxs.each(function(){ 
     var name = $(this).attr('name'); 
     namedChbxs[name] = (namedChbxs[name] || $()).add(this); 
    }); 
    chbxs.change(function(){ 
     var name = $(this).attr('name'); 
     var cbx = namedChbxs[name]; 
     if(cbx.filter(':checked').length>0){ 
      cbx.removeAttr('required'); 
     }else{ 
      cbx.attr('required','required'); 
     } 
    }); 
}); 

Answer 4

你可以使用jQuery少一行：

$(function(){ 

    var requiredCheckboxes = $(':checkbox[required]'); 

    requiredCheckboxes.change(function(){ 

     if(requiredCheckboxes.is(':checked')) { 
      requiredCheckboxes.removeAttr('required'); 
     } 

     else { 
      requiredCheckboxes.attr('required', 'required'); 
     } 
    }); 

}); 

隨着$（ '：複選框[需要]'）選擇與所需，則屬性所有複選框，與施加到該組的複選框的.change方法，則可以執行該組的任何項目更改時所需的功能。在這種情況下，如果選中任何複選框，我將刪除屬於所選組的所有複選框的所需的屬性。

我希望這會有所幫助。

告別。

Answer 5

這是對icova的答案的改進。它也按名稱對輸入進行分組。

$(function(){ 
    var allRequiredCheckboxes = $(':checkbox[required]'); 
    var checkboxNames = []; 

    for (var i = 0; i < allRequiredCheckboxes.length; ++i){ 
    var name = allRequiredCheckboxes[i].name; 
    checkboxNames.push(name); 
    } 

    checkboxNames = checkboxNames.reduce(function(p, c) { 
    if (p.indexOf(c) < 0) p.push(c); 
    return p; 
    }, []); 

    for (var i in checkboxNames){ 
    !function(){ 
     var name = checkboxNames[i]; 
     var checkboxes = $('input[name="' + name + '"]'); 
     checkboxes.change(function(){ 
     if(checkboxes.is(':checked')) { 
      checkboxes.removeAttr('required'); 
     } else { 
      checkboxes.attr('required', 'required'); 
     } 
     }); 
    }(); 
    } 

}); 

Answer 6

上icova的回答大廈，這裏的代碼，這樣你就可以使用自定義的HTML5驗證消息：

$(function() { 
    var requiredCheckboxes = $(':checkbox[required]'); 
    requiredCheckboxes.change(function() { 
     if (requiredCheckboxes.is(':checked')) {requiredCheckboxes.removeAttr('required');} 
     else {requiredCheckboxes.attr('required', 'required');} 
    }); 
    $("input").each(function() { 
     $(this).on('invalid', function(e) { 
      e.target.setCustomValidity(''); 
      if (!e.target.validity.valid) { 
       e.target.setCustomValidity('Please, select at least one of these options'); 
      } 
     }).on('input, click', function(e) {e.target.setCustomValidity('');}); 
    }); 
}); 

Answer 7

var verifyPaymentType = function() { 
    //coloque os checkbox dentro de uma div com a class checkbox 
    var inputs = window.jQuery('.checkbox').find('input'); 
    var first = inputs.first()[0]; 

    inputs.on('change', function() { 
    this.setCustomValidity(''); 
    }); 

    first.setCustomValidity(window.jQuery('.checkbox').find('input:checked').length === 0 ? 'Choose one' : ''); 
} 

window.jQuery('#submit').click(verifyPaymentType); 

} 

Answer 8

提供類似於@IvanCollantes答案另一種方法。 它的工作原理是通過名稱額外過濾所需的複選框。我還簡化了代碼。

jQuery(document).ready(function($) { 
 
    var requiredCheckboxes = $(':checkbox[required]'); 
 
    requiredCheckboxes.on('change', function(e) { 
 
    var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]'); 
 
    var isChecked = checkboxGroup.is(':checked'); 
 
    checkboxGroup.prop('required', !isChecked); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form target="_blank"> 
 
    <p> 
 
    At least one checkbox from each group is required... 
 
    </p> 
 
    <fieldset> 
 
    <legend>Checkboxes Group test</legend> 
 
    <label> 
 
     <input type="checkbox" name="test[]" value="1" required="required">test-1 
 
    </label> 
 
    <label> 
 
     <input type="checkbox" name="test[]" value="2" required="required">test-2 
 
    </label> 
 
    <label> 
 
     <input type="checkbox" name="test[]" value="3" required="required">test-3 
 
    </label> 
 
    </fieldset> 
 
    <br> 
 
    <fieldset> 
 
    <legend>Checkboxes Group test2</legend> 
 
    <label> 
 
     <input type="checkbox" name="test2[]" value="1" required="required">test2-1 
 
    </label> 
 
    <label> 
 
     <input type="checkbox" name="test2[]" value="2" required="required">test2-2 
 
    </label> 
 
    <label> 
 
     <input type="checkbox" name="test2[]" value="3" required="required">test2-3 
 
    </label> 
 
    </fieldset> 
 
    <hr> 
 
    <button type="submit" value="submit">Submit</button> 
 
</form>