jQuery - 將標籤和複選框的組限制爲最大數

我試圖限制checkboxes及其相關的labels可選的最大數量。複選框工作正常，但標籤仍然可以選擇超過限制。jQuery - 將標籤和複選框的組限制爲最大數

我的HTML input形成這樣的：

<div data-toggle="buttons" class="btn-group bizmoduleselect"> 
<label id="b-<?php echo $term->term_id; ?>" class="btn btn-default <?php echo $labelchk ?>"> 
    <div class="bizcontent"> 
     <input id="youaresure" type="checkbox" name="email_cats[]" <?php echo $chk ?> value="<?php echo $term->term_id ?>" /> 
     <h5><?php echo $term->name ?></h5> 
    </div> 
</label> 
</div>

和我的jQuery的限制複選框和標籤是這樣的：

var $checkboxes = $('input[id="youaresure"]'); 
var $parent = $checkboxes.parent('label'); 
var max = 5; 
$checkboxes.show(); 
$checkboxes.change(function() { 
    $(this).prop('checked', function() { 
     if ($(this).is(':checked')) { 
      return ($checkboxes.filter(':checked').length <= max) ? true : false; 
     } 
    }); 
}); 
$parent.show(); 
$parent.change(function() { 
    $(this).prop('class', function() { 
     if ($(this).is('active')) { 
      return ($parent.filter('active').length <= max) ? true : false; 
     } 
    }

基本上，PHP插入一個active類labels父母inputs:checked和我應該防止labels和inputs被選中如果超過5。對於複選框是好的，但父標籤仍然可選，基本上是可見的。

編輯：我已經忘記表明它可以與bootstrap一起工作，並且每個複選框都像一個按鈕一樣威脅着！

來源

2016-07-30 XiLab

PLZ添加完整的代碼的jsfiddle –

標籤沒有改變事件。因此，您可以使用標籤點擊事件或在複選框更改事件上執行所有操作。 – Gatsbill

不能在頁面中重複Id，它們根據定義是唯一的 – charlietfl

<label>上沒有change事件。一切都應該在事件處理程序的<input>

我的建議是你禁用其他複選框達到限制時。

下面將切換標籤上的活動類以及禁用/啓用選中輸入

var max = 5; 

var $checkboxes = $(':checkbox').change(function(e) { 
    var maxChecked = $checkboxes.filter(':checked').length === max; 
    // disable/enable others based on limit 
    $checkboxes.not(':checked').prop('disabled', maxChecked); 
    // toggle label active based on checked state 
    $(this).closest('label').toggleClass('active', this.checked); 
});

DEMO

來源

2016-07-30 11:00:52 charlietfl

你好，謝謝你的回答，但我試過你的解決方案，它不會工作。我檢查了我的代碼，實際上我忘記了它可以與bootstrap data-toggle =「buttons」一起使用。我編輯了這個問題。可能就是這樣！我已經使用[this]（http://bootsnipp.com/snippets/featured/multi-select-tiled-layout）片段。 – XiLab

我的意思是複選框像按鈕一樣對待！ – XiLab

謝謝我終於從你的答案開始解決問題。祝你有美好的一天！ – XiLab

這不起作用，因爲標籤沒有更改處理程序。也許你應該更好地將你的一些代碼添加到你的複選框的屬性檢查功能，如果有必要刪除'活躍'類父標籤。

來源

2016-07-30 10:27:44

jQuery - 將標籤和複選框的組限制爲最大數

回答

相關問題