Снимите флажки с помощью Javascript Не работает

Question

Во-первых, я искал SO, и есть много вопросов с тем же заголовком, но ни один из них не имеет ответа, и я пробовал все эти ответы с разными версиями, но ничего не работает.

Итак, у меня есть форма со многими флажками, и я хочу снять отметку со всех флажков, когда пользователь меняет пользователя с userSelection. как этот

<form id="myForm"> 
    <select id="userSelection" onchange="userChange()"> 
     <option value="0" acl="">Select User</option> 
     <option value="1" acl="2,5">ABC</option> 
     <option value="2" acl="3,4">DEF</option> 
    </select> 

    <label><input type="checkbox" ac="2" name="chkAc"><p>Income/Expense</p></label> 
    <label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label> 
    <label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label> 
    <label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label> 
</form> 

<script type="text/javascript"> 
    function checkUncheckFields(isAllCheck) 
    { 
    var cbarray = document.getElementsByName('chkAc'); 
    for(var i = 0; i < cbarray.length; i++) 
    { 
      isAllCheck == false? cbarray[i].checked=false : cbarray[i].checked = true; 
    } 
    } 

    function userChange() 
    { 
    checkUncheckFields(false); 
    var access = $("#userSelection option:selected").attr('acl').split(','); 
    $('input[type=checkbox]').each(function() 
    { 
     if(access.indexOf($(this).attr('ac')) > -1) 
     { 
      $(this).attr('checked',true); 
     } 
    }); 
    } 
</script> 

Теперь, когда я иду на мою страницу, вручную проверить все эти флажки, а затем изменить пользователя из списка userSelection, не снимите флажки и, если это снимите все флажки, то это оленья кожа проверить флажки, отвечающие условию при изменении пользователя. Я использую JQuery 1.11.0

Я сделал JSBin здесь. Пожалуйста, проверьте его. http://jsbin.com/famehaguni/1/watch. Сначала проверьте все флажки, а затем смените пользователя. Затем вы можете увидеть в нашей функции userChange() мы дали условие, чтобы проверить флажки с значениями acl attlute пользователя, но он не проверяет их, когда вы выбираете пользователя ABC, тогда он должен проверять 2 и 5 флажков, и если вы выберете пользователя DEF, тогда следует проверить 3 и 4 флажков

Answer 1

попробовать использовать это: // установить unchcked все флажки с name=chkAc;

function checkUncheckFields() 
 
    { 
 
    $("[name=chkAc]").each(function(){ 
 
     $(this).attr('checked', false); 
 
    }); 
 
    
 
    } 
 

 
    function userChange() 
 
    { 
 
    var access = $("#userSelection option:selected").attr('acl').split(','); 
 
    checkUncheckFields(); 
 
    $("[name=chkAc]").each(function(){ 
 
    if($.inArray($(this).attr('ac'),access) >= 0)// your way of checking will also work. 
 
     { 
 
     
 
     $(this).prop('checked', true); 
 
     } 
 
    }); 
 
    
 
      
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm" > 
 
    <select id="userSelection" onchange="userChange()"> 
 
    <option value="0" acl="">Select User</option> 
 
    <option value="1" acl="2,5">ABC</option> 
 
    <option value="2" acl="3,4">DEF</option> 
 
</select> 
 
    <br/> 
 
    <label><input type="checkbox" ac="2" name="chkAc"><p>Income/Expense</p></label> 
 
    <label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label> 
 
    <label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label> 
 
    <label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label> 
 
</form>

Answer 2

Вместо removeAttribute, попробуйте:

Edit: на основе ваших комментариев, попробуйте следующее:

function userChange() 
{ 
    checkUncheckFields(false); 
    var acc = $("#userSelection option:selected").attr('acl'); 
    var access = acc.split(","); 
    for(var i=0; i < access.length; i++) 
    { 
    $('input[type=checkbox]').each(function() 
    { 
     if(access[i] == $(this).attr('ac')) 
     $(this).attr('checked',true); 
    }); 
    } 
} 

Он работает.

Answer 3

Вы можете увидеть мои DEMO CODE

Вы должны изменить функцию checkUncheckFields:

<form id="myForm" > 
<select id="userSelection" onchange="userChange()"> 
    <option value="0" acl="">Select User</option> 
    <option value="1" acl="2,5">ABC</option> 
    <option value="2" acl="3,4">DEF</option> 
</select> 
<br/> 
<label><input type="checkbox" ac="2" name="chkAc"><p>Income/Expense</p></label> 
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label> 
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label> 
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label> 
</form> 

<script type="text/javascript"> 
    function checkUncheckFields(isAllCheck) 
    { 
    var cbarray = document.getElementsByName('chkAc'); 
    for(var i = 0; i < cbarray.length; i++) 
    { 
     if (!isAllCheck) {cbarray[i].checked = false; } else cbarray[i].checked = true; 
    } 
    } 

    function userChange() 
    { 
    checkUncheckFields(false); 
    var access = $("#userSelection option:selected").attr('acl').split(','); 
    $('#myForm input[type=checkbox]').each(function() 
     { 
     if(access.indexOf($(this).attr('ac')) > -1) 
      { 
      $(this).attr('checked',true); 
      } 
     }); 
    } 
    </script> 

Answer 4

Вот ваш ответ:

HTML-

<form id="myForm"> 
<select id="userSelection" > 
    <option value="0" acl="">Select User</option> 
    <option value="1" acl="2,5">ABC</option> 
    <option value="2" acl="3,4">DEF</option> 
</select> 

<label><input type="checkbox" ac="2" name="chkAc"><p>Income/Expense</p></label> 
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label> 
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label> 
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label> 
</form> 

Javascript

function checkUncheckFields(isAllCheck) 
{ 
     if(isAllCheck) 
       $("input[name='chkAc']").attr("checked", "checked"); 
     else 
      $("input[name='chkAc']").removeAttr("checked");    
} 
$(document).ready(function(){ 
    $("#userSelection").change(function(){ 
     checkUncheckFields(false); 
    }) 
}) 

Смотрите Fiddle