限制數允許進行檢查

Question

可能重複：
Count the number of checkboxes selected without reloading the page?

我有，詢問他們希望哪種類型的通的用戶的訂單（1-3天），並給他們選擇他們想要通過的日子的選項。

目前，當他們選擇3天時，我的jQuery爲他們選擇所有3個複選框，並且在他們選擇1或2天時取消選擇。但是，我想要做的是：

當他們選擇2天通過時，它只允許他們檢查最多2個框。當他們選擇1天通行證時，只允許他們檢查1個通行證。

我對我的validateDays()函數中需要執行的操作提出了一個空白 - 執行此驗證的最佳方式或者是否實際上是最佳路徑。

我認爲使用的每種方法都需要複選框具有相同的名稱/ ID - 但由於表單的其他部分（省略），他們不幸的是不能。

任何想法/指針？

頭部分的JavaScript：

<script type="text/javascript"> 

function validateDays() { 
    $('#matthewpeckham').find('input[type="checkbox"]').click(function() { 
     var pass = parseInt($('input[name="other_1"]:checked').val(), 10) //1,2,3 
     var days = $('#matthewpeckham').find('input[type="checkbox"]:checked').length; 
     console.log(days, pass); 
     if (days == pass) { 
      $('#matthewpeckham').find('input[type="checkbox"]').not(':checked').prop('disabled', true); 
     } 
     else { 
      $('#matthewpeckham').find('input[type="checkbox"]').not(':checked').prop('disabled', false); 
     } 
    }) 
    $('input[name="other_1"]').change(function() { 
     $('#matthewpeckham').find('input[type="checkbox"]').prop({ 
      'checked': false, 
      'disabled': false 
     }); 
     if (parseInt($(this).val(), 10) == 3) $('#matthewpeckham').find('input[type="checkbox"]').prop({ 
      'checked': true, 
      'disabled': false 
     }); 
    }); 
} 

</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    jQuery('#3daypass').click(function() { 
     jQuery('#other_2 , #other_3 , #other_4').prop('checked', true); 
    }); 
    jQuery('#2daypass , #1daypass').click(function() { 
     jQuery('#other_2 , #other_3 , #other_4').prop('checked', false); 
    }); 
}); 

</script> 

主體部分HTML：

<input name="other_1" type="radio" value="3daypass" id="3daypass" onClick="validateDays();"> 
<input name="other_1" type="radio" value="2daypass" id="2daypass" onClick="validateDays();"> 
<input name="other_1" type="radio" value="1daypass" id="1daypass" onClick="validateDays();"> 

<input name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb"> 
<input name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb"> 
<input name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb"> 

Answer 1

這裏是一個jQuery的解決方案：jsFiddle example

$('input[type="checkbox"]').click(function() { 
    var pass = parseInt($('input[name="other_1"]:checked').val(), 10) //1,2,3 
    var days = $('input[type="checkbox"]:checked').length; 
    console.log(days, pass); 
    if (days == pass) { 
     $('input[type="checkbox"]').not(':checked').prop('disabled', true); 
    } 
}) 
$('input[name="other_1"]').change(function() { 
    $('input[type="checkbox"]').prop({ 
     'checked': false, 
      'disabled': false 
    }); 
    if (parseInt($(this).val(), 10) == 3) $('input[type="checkbox"]').prop({ 
     'checked': true, 
      'disabled': false 
    }); 
}); 

Answer 2

我不是這方面的任何方式的專家，但這裏是我在做我的網站，你應該能夠修改它以適應你的需要...只要記住給你的輸入相同的類名。

<script type="text/javascript"> 
function Check() { 
    var count = 0; 
    var checkBoxes = document.getElementsByClassName('chkValidation'); 
    for (var index = 0; index < checkBoxes.length; index++) { 
     if (checkBoxes[index].type == 'checkbox') { 
      if (!checkBoxes[index].disabled) { 
       count = checkBoxes[index].checked ? (count + 1) : count; 
      } 
     } 
    } 
    if (count > 3) { 
     alert('Question two - please select a maximum of 3 sub questions to ask.'); 
     return false; 
    } 
    return true; 
} 

Answer 3

您需要檢查您的驗證功能檢查箱子的數量：

function validateDays() { 
    var numBoxesChecked = $("input:checkbox:checked").length; 

    if (document.getElementById("2daypass").checked && numBoxesChecked > 2) { 
     // invalid 
    } 

    if (document.getElementById("1daypass").checked && numBoxesChecked > 1) { 
     // invalid 
    } 
} 

請記住，任何JavaScript驗證可以被繞過，所以確保你正在執行某種類型在你的服務器上進行驗證。

另請注意，如果頁面上還有其他不相關的複選框，例如將其限制爲容器，例如，您可能需要更改numBoxesChecked選擇器。

var numBoxesChecked = $('#someContainer').find("input:checkbox:checked").length; 

Answer 4

jQuery公開checkbox selector這應該在這裏證明有用。然後

你validateDays功能可以做一些沿着這些路線

var checkedBoxes = jQuery(":checkbox:checked"); 
var numChecked = checkedBoxes.length; 
... 
    else if (document.getElementById("2daypass").checked) { 
     if (numChecked > 2) { /*do something*/ } 
    } 
    else if (document.getElementById("1daypass").checked) { 
     if (numChecked > 1) { /*do something*/ } 
    } 
    else { 
     // DO NOTHING 
    } 
... 

然而，你可能有一個「恢復」框的問題。你也許可以做簡單的

jQuery(this).prop('checked', false) 

Answer 5

你也可以做到這一點dymanically，使用像這樣的功能：

$('.checkbox').on('click', function(e) { 
    var num_checked = 0; 

    $('.checkbox').each(function() { 
    if ($(this).prop('checked')) num_checked++; 
    }); 

    var max_checked = $('input[name="other_1"]:checked').val(); 

    if (num_checked > max_checked) { 
    $(this).prop('checked', false); 
    } 
}); 

假設一些小的修改，您的HTML：

<input name="other_1" type="radio" value="3" id="3daypass"> 
<input name="other_1" type="radio" value="2" id="2daypass"> 
<input name="other_1" type="radio" value="1" id="1daypass"> 

<input class="checkbox" name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb"> 
<input class="checkbox" name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb"> 
<input class="checkbox" name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb"> 

演示：http://jsbin.com/osecep/1/

這並不完美，你可能想清除ch當天數發生變化時，eckbox會顯示出來，但這應該讓你在正確的軌道上。