Функция jQuery работает в IE8, но не FF3.6.11. Зачем?

Question

У меня есть набор флажков, которые включают «Нет» в качестве опции. Если щелкнуть «Нет», остальная часть набора флажков должна быть разблокирована. Если нажата одна или несколько остальной части набора, «None» должен быть снят. В IE8 работает следующее. В FF3.6.11 он терпит неудачу. Как я могу это исправить?

Javascript

// go through <table class='checktoggle'> and add the click event "checkToggle" 
// to all the <input type='checkbox'>s 
$(document).ready(function() { 
    $("table.checktoggle").find('input:checkbox').click(checkToggle); 
}); 

function checkToggle(event) { 
    var cur_chkbox=$(event.target); 
    if (cur_chkbox.val()==0) { //if clicked "None", uncheck the rest of the set 
     $("input:checkbox[name^="+cur_chkbox.attr('name')+"]").filter(function(value){ return value!=0;}).attr('checked',false); 
    } else { //else unclick "None" 
     $("input:checkbox[name^="+cur_chkbox.attr('name')+"]").filter(function(value){ return value==0;}).attr('checked',false); 
    } 
} 

HTML

<table id="perm_table" class="checktoggle"> 
    <tr > 
     <th>Permission</th> 
     <th>none</th> 
     <th>view</th> 
     <th>use</th> 
     <th>add</th> 
     <th>edit</th> 
     <th>delete</th> 

    </tr> 
    <tr> 
     <td>location</td><td><input type='checkbox' name='location[]' id='location0' value='0'/></td> 
     <td><input type='checkbox' name='location[]' id='location1' value='1' checked="yes" /></td> 
     <td><input type='checkbox' name='location[]' id='location2' value='2'/></td> 
     <td><input type='checkbox' name='location[]' id='location4' value='4'/></td> 
     <td><input type='checkbox' name='location[]' id='location8' value='8'/></td> 
     <td><input type='checkbox' name='location[]' id='location16' value='16'/></td> 
</tr> 
<tr> 
     <td>watersystem</td><td><input type='checkbox' name='watersystem[]' id='watersystem0' value='0' /> 
     <td><input type='checkbox' name='watersystem[]' id='watersystem1' value='1' checked="yes"/></td> 
     <td><input type='checkbox' name='watersystem[]' id='watersystem2' value='2'/></td> 
     <td><input type='checkbox' name='watersystem[]' id='watersystem4' value='4'/></td> 
     <td><input type='checkbox' name='watersystem[]' id='watersystem8' value='8'/></td> 
     <td><input type='checkbox' name='watersystem[]' id='watersystem16' value='16'/></td> 
</table> 

Answer 1

Вопрос нагнетается в квадратные скобки внутри имя-атрибута.

Попробуйте это как селектор:

$("input:checkbox[name^='"+cur_chkbox.attr('name')+"']") 

(одиночные кавычки вокруг атрибута-значения делают разницы)

Answer 2

Измените функцию на следующее:

function checkToggle() { 
    var cur_chkbox=$(this); 
    if (cur_chkbox.val()==0) { //if clicked "None", uncheck the rest of the set 
     $("input:checkbox[name^='"+cur_chkbox.attr('name')+"']").filter(function(value){ return value!=0;}).attr('checked',false); 
    } else { //else unclick "None" 
     $("input:checkbox[name^='"+cur_chkbox.attr('name')+"']").filter(function(value){ return value==0;}).attr('checked',false); 
    } 
} 

Нажмите, по какой-то причине не отправлял событие, поэтому мы можем использовать $(this) вместо $(event.target).

Кроме того, ваши селекторы должны быть изменены в соответствии с решением доктора Молле.

jsFiddle