Jquery如何計數檢查和禁用複選框

我試圖禁用所有未經檢查的複選框時，有5複選框。Jquery如何計數檢查和禁用複選框

我的代碼是不是在這裏工作是：http://jsfiddle.net/mtYtW/18/

我的Jquery：

var countchecked = $('table input[type="checkbox"]').find(":checked").length 

    if(countcheckhed > 5) { 
     $("table input:checkbox").attr("disabled", true); 
    } else {}

我的HTML：

<table cellspacing="0" cellpadding="0" width="770px;"> 
    <tbody><tr style="border: 1px solid green; height: 40px; font-size: 14px;"> 
    <th>Feature 1</th> 
    <th>Feature 2</th> 
    <th>Feuture 3</th> 
    </tr> 

    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
    <tr> 
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> 
    <td>Test 1</td> 
    <td>Test 2</td> 
    <td>Test 3</td> 
    <td>Test 4</td> 
    <td>Test 5</td> 
    <td>Test 6</td> 
    </tr> 
</tbody></table>

來源

2011-08-05 Rails beginner

請你的代碼添加到這個問題爲好。對於將來如果jsfiddle消失，這個問題仍然是相關的。 –

您提供的js小提琴只需傳入代碼，然後再次不再檢查。嘗試獲取所有複選框並添加.click屬性並重新評估檢查計數。 –

countcheckhed拼寫錯誤。 – Narnian

以下應爲您的需求做的伎倆：

$("table input[type=checkbox]").click(function(){ 
var countchecked = $("table input[type=checkbox]:checked").length; 

if(countchecked >= 5) 
{ 
    $('table input[type=checkbox]').not(':checked').attr("disabled",true); 
} 
else 
{ 
    $('table input[type=checkbox]').not(':checked').attr("disabled",false); 
}

}）;

Example for your needs

（通用）下面將禁用所有未選中的複選框：

$('input[type=checkbox]').not(':checked').attr("disabled","disabled");

Generic Disable Example

來源

2011-08-05 18:26:30

如何啓用所有複選框，當6個複選框之一未選中時？ –

else語句處理:)你可以檢查第一個例子 –

非常感謝！完美的例子。 – Drako

我猜你想禁用的複選框，一旦休息檢查複選框計數得到超過5個。如果是這種情況，請嘗試以下操作：

$('table input[type="checkbox"]').click(function(){ 
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length; 

    if(countchecked > 4) { 
     $("table input:checkbox").not(":checked").attr("disabled", true); 
    } else {} 
});

工作例如：http://jsfiddle.net/mtYtW/30/

如果要禁用頁面加載的複選框，並確認是否有被選中，那麼試試這個超過5個複選框：

$(function(){ 
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length; 

    if(countchecked > 4) { 
     $("table input:checkbox").not(":checked").attr("disabled", true); 
    } else {} 
});

來源

2011-08-05 18:32:56 Chandu

「> 5」部分將允許選擇6個複選框。 – brezanac

@holodoc：錯過了'有5個複選框'部分的問題，並且使用了OP的原始代碼。修正它 – Chandu

大聲笑它的有趣，看這些人後，他們是如何改變他們的解決方案：D – brezanac

看看這

http://jsfiddle.net/mtYtW/33/

來源

2011-08-05 18:33:33 ShankarSangoli

你的代碼是接近，有以下幾個主要問題。

http://jsfiddle.net/mtYtW/37/

$(function() { 
    $('table input[type="checkbox"]').change(function() { 
     var countchecked = $('table input[type="checkbox"]').filter(":checked").length 

     if (countchecked >= 5) { 
      $("table input:checkbox").not(":checked").attr("disabled", true); 
     }else{ 
      $("table input:checkbox").attr("disabled", false); 
     } 
    }); 
});

最大的，你有你的代碼只執行onload事件。您需要執行它的其中一個複選框被選中的任何時間，即該部分：

$('table input[type="checkbox"]').change(function() {

你有拼寫錯誤的變量名countcheck不存在，這是countchecked。

當您真正需要filter時，您正在使用find。 Find會搜索你設置的元素的後代，你想過濾它們。

你有> 5當你說你想禁用AT 5.所以它應該是>=。

您正在禁用所有複選框，而不僅僅是您聲明的未選中狀態，我添加了.not(":checked")。

最後，我想你可能會想重新啓用他們，如果一個是選中的，所以我說：

}else{ 
    $("table input:checkbox").attr("disabled", false); 
}

來源

2011-08-05 18:34:28

$(':checkbox').bind('click', function(){ 
    if($(':checkbox:checked').length >= 5) { 
     $(':checkbox').not(':checked').prop('disabled', true); 
    } else { 
     $(':checkbox').not(':checked').prop('disabled', false); 
    } 
});

注意prop是jQuery的1.6排斥。在jQuery <的情況下1.6使用attr。

來源

2011-08-05 18:35:59 brezanac

$('table input[type="checkbox"]').click(function(){ 
    var countcheck = $('table input[type="checkbox"]:checked').length; 
    if(countcheck > 4) { 
     $("table input:checkbox:not(:checked)").attr("disabled", true); 
    }else 
    { 
     $("table input:checkbox").attr("disabled", false); 
    } 
});

工作實例：http://jsfiddle.net/mtYtW/48/

注意：如果取消選擇五個一此代碼將使複選框！

來源

2011-08-05 18:36:00

不，它不會。它將允許選擇6個複選框。 – brezanac

$("table input[type=checkbox]").click(function(){ 
    var countchecked = $("table input[type=checkbox]:checked").length; 
    if(countchecked >= 5) { 
     $("table input:checkbox").attr("disabled", true); 
    }else{ 

    } 
});

工作例如：http://jsfiddle.net/Re5uy/6/

來源

2011-08-05 18:36:20 RobB

Jquery如何計數檢查和禁用複選框

回答

相關問題