2011-08-05 5 views
8

Я пытаюсь отключить все снятые флажки, если флажки отмечены 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> 
+0

Пожалуйста, добавьте свой код на вопрос, как хорошо. В будущем, если jsfiddle когда-либо исчезнет, ​​вопрос все равно будет иметь значение. –

+0

js скрипка, которую вы предоставили, просто передает код на загрузку, а затем никогда не проверяет снова. Попытайтесь получить все флажки и добавить атрибут .click и повторно оценить количество проверок. –

+0

countcheckhed с ошибкой. – Narnian

ответ

7

Следующая должны сделать трюк для ваших потребностей:

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

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

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

Generic Disable Example

+0

Как включить все флажки, если один из шести флажков не установлен? –

+1

Оператор else обрабатывает это: Вы можете проверить первый пример –

+0

Большое спасибо! Прекрасный пример. – Drako

0

Я предполагаю, что вы хотите, чтобы отключить остальные флажки, как только проверенные флажки подсчитываются более чем 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 {} 
}); 
+0

Часть «> 5» позволит выбрать 6 флажков. – brezanac

+0

@holodoc: Пропустил «когда есть 5 проверенных флажков» в вопросе и прошел условие, использующее исходный код OP. Исправлено: – Chandu

+0

LOL смешно наблюдать за людьми, как все они изменили свои решения после этого замечания: D – brezanac

1

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

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.

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

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

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

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

}else{ 
    $("table input:checkbox").attr("disabled", false); 
} 
0
$(':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.

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

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

+0

Нет, это не будет. Это позволит выбрать 6 флажков. – brezanac

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

Смежные вопросы