Jquery, как считать отмеченные и отключить флажки

Question

Я пытаюсь отключить все непроверенные флажки, когда установлено 5 флажков.

Мой код не работает, вот он: 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>

Answer 1

Следующие действия помогут вам:

$("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);
}

});

Пример для ваших нужд

(Generic) Следующее отключит все ваши непроверенные флажки:

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

Generic Disable Example

Answer 2

$('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/

ПРИМЕЧАНИЕ. Этот код активирует флажки, если вы отмените выбор одного из пяти!

Answer 3

Ваш код был близок, с несколькими серьезными проблемами.

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);
        }
    });
});

Самое большое, ваш код выполнялся только при загрузке. Вы должны выполнить его каждый раз, когда установлен один из флажков, то есть эта часть:

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

У вас было имя переменной с ошибкой countcheck не существует, это было countchecked.

Вы использовали find, когда действительно хотели filter. Find будет искать в потомках элементов вашего набора, вы хотели отфильтровать их.

У вас было > 5, когда вы заявили, что хотите отключить AT 5. Так что это должно быть >=.

Вы отключили ВСЕ флажки, а не только не отмеченные, как вы сказали, я добавил .not(":checked").

И, наконец, я подумал, что вы, вероятно, захотите включить их снова, если один из них не отмечен, поэтому я добавил:

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

Answer 4

$("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/

Answer 5

$(':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 используйте <code>attr.

Answer 6

Взгляните на это

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

Answer 7

Полагаю, вы хотите отключить остальные флажки, как только число отмеченных флажков станет больше 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 {}
});