Флажок prop() не работает должным образом

Question

Я пытаюсь проверить/снять флажок с помощью jQuery 1.12. Это мой код:

$(document).ready(function() { 
 
    $('#btn-agree').click(function() { 
 
    $('#checkbox-3').prop('checked', true); 
 
    }); 
 
    $('#btn-notagree').click(function() { 
 
    $('#checkbox-3').prop('checked', false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
<input type="checkbox" name="agreement" id="checkbox-3" /> 
 
<button id="btn-agree">I Agree</button> 
 
<button id="btn-notagree">Cancel</button>

Когда я нажимаю btn-agree, функция не возвращает никаких ошибок, но флажок не установлен. console.log($('#checkbox-3').prop('checked'); показать true

Может ли кто-нибудь указать, что случилось в моем коде?

Редактировать Я считаю, что проблема исходит из чего-то еще в моем проекте. вы можете удалить этот вопрос.

Answer 1

Вы должны сделать что-то подобное, то есть chekc проверяется ли флажок, и если да снимите его еще проверить его

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="agreement" id="checkbox-3"/> 
 
<button id="btn-agree">I Agree</button> 
 
<button id="btn-notagree">Cancel</button> 
 

 
<script> 
 
$(document).ready(function() { 
 
    $('#btn-agree').click(function() { 
 
    if($('#checkbox-3').prop('checked')) 
 
    $('#checkbox-3').prop('checked',false); 
 
    else{ 
 
    $('#checkbox-3').prop('checked',true); 
 
    } 
 
    }); 
 
}); 
 
    </script>

Answer 2

Вы можете также использовать is(':checked'), чтобы проверить, является ли галочка или не проверена

$(document).ready(function() { 
 
    $('#btn-agree').click(function() { 
 
     if($("#checkbox-3").is(':checked')) 
 
     { 
 
      $("#checkbox-3").prop('checked',false); 
 
     }    
 
     else 
 
     { 
 
      $("#checkbox-3").prop('checked',true); 
 
     }      
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type="checkbox" name="agreement" id="checkbox-3"/> 
 
<button id="btn-agree">I Agree</button> 
 
<button id="btn-notagree">Cancel</button>

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" name="agreement" id="checkbox-3"/> 
<button id="btn-agree">I Agree</button> 
<button id="btn-notagree">Cancel</button> 

<script> 
$(document).ready(function() { 
    $('#btn-agree').click(function() { 
    $(this).prop('checked',true); 
    }); 
$('#btn-notagree').click(function() { 
    $(this).prop('checked',false); 
    }); 
}); 
    </script>