限制/禁用/啓用複選框

Question

我對此鏈接有問題：Limiting default checked checkboxes。

我擴展了腳本驗證的代碼，下面是我想要做的。

1. 我想要一個默認選中的複選框。
2. 我想限制複選框的選擇，例如：如果mvp是3我應該選擇3並禁用複選框的其餘部分就像這樣。 Limit Checkbox。
3. 我想禁用提交按鈕，如果沒有達到選擇，例如，如果給定的最大數量是5。如果選擇未被選中，提交按鈕將不會被啓用。

這裏是我的示例代碼：

var mvp = 5; 

$(document).ready(function() { 


    $("input:checkbox").each(function(index) { 
     this.checked = (index < mvp); 
    }); 

$("input:checkbox").click(function() { 

    var bol = $("input:checkbox:checked").length != mvp; 

    if(bol){ 
    alert("You have to choose "+ mvp +" mvp's only"); 
    this.checked = false; 
    $("#button-cart").attr("disabled", true); 
    } 
    else{ 
    $("input:checkbox").not(":checked").attr("disabled",bol); 
    $("#button-cart").attr("disabled", false); 
    } 
}); 

}); 

這裏的小提琴：fiddle

基於我設置的MVP值5的例子中，當頁面加載有默認的5複選框檢查。那麼如果你取消選中1，那麼警報會觸發它說你應該有5個MVP，那麼這個按鈕將被禁用。一旦你再次檢查一個複選框，該按鈕就會出現。但用戶可以選擇2個左側複選框。但如果用戶超過5個選擇，則警報將再次觸發並將其返回到5個複選框。問題在於按鈕將保持禁用狀態。

你能幫我做這樣的邏輯：提前d感謝..

Answer 1

試試這個，

var mvp = 5; 
$(document).ready(function() { 
    $("input:checkbox").each(function (index) { 
     this.checked = (index < mvp); 
    }).click(function() { 
     en_dis= $("input:checkbox:checked").length < mvp 
     $('#button-id').prop('disabled', en_dis); 
     // to disable other checkboxes 
     $('input:checkbox:checked').length >= mvp && 
      $("input:checkbox:not(:checked)").prop('disabled',true); 
    }).change(function() { 
     if ($(this).siblings(':checked').length >= mvp) { 
      this.checked = false; 
     } 
    }); 
}); 

Working Demo和Updated Demo

Answer 2

寫：

$("input:checkbox").each(function (index) { 
    this.checked = (index < mvp); 
}); 
$("#button-id").attr("disabled", true); 
disable(); 
$("input:checkbox").change(function() { 
    var bol = $("input:checkbox:checked").length != mvp; 
    if (bol) { 
     alert("You have to choose " + mvp + " mvp's only");    
     $("#button-id").attr("disabled", true); 
     enable(); 
    } else { 
     $("input:checkbox").not(":checked").attr("disabled", bol); 
     $("#button-id").attr("disabled", false); 
     disable(); 
    }   
}); 
function enable(){ 
    $("input:checkbox").not(":checked").each(function(){ 
     $(this).removeAttr("disabled"); 
    }); 
} 
function disable(){ 
    $("input:checkbox").not(":checked").each(function(){ 
     $(this).attr("disabled","disabled"); 
    }); 
} 

Updated fiddle here.

Answer 3

你不應該設置複選框的選中屬性並禁用該按鈕。

在這裏你去：

$(function() { 
    var $button = $('#button-id'), 
     mvp  = 5; 

    $("input:checkbox").each(function (index) { 
     this.checked = (index < mvp); 
    }).on("click", function() { 
     if ($("input:checkbox:checked").length != mvp) { 
      alert("You have to choose " + mvp + " mvp's only"); 
      $button.prop("disabled", true); 
     } else { 
      $("input:checkbox").not(":checked").prop("disabled", false); 
      $button.prop("disabled", false); 
     } 
    }); 
}); 

工作演示：http://jsfiddle.net/R79cM/