Почему флажок не снимается в jQuery

Question

Мне нужно снять флажок. Он делает все как предупреждение или удаление div, но не снимает флажок. Я использовал оба метода: attr и prop. Флажок id в порядке. Даже он не показывает ошибок в консоли firebug.

$('html').on('click', '#inScopeDiv .remButton', function() { 
     var currId = $(this).attr('id'); 
     var chkBoxId = "#chk"+currId; 
     alert(currId); 
     alert('#chk'+currId); 
     $(chkBoxId).prop("checked", false); 
     $(chkBoxId).attr("checked", false); 
     $('#div'+ currId).remove(); 
     $('#inScopeActionDiv' + currId).remove();   
    }); 

HTML при условии ::

<c:forEach items="${data.inScope}" var="inScopeValues"> 
     <div class="col-md-12" style="background-color: snow;"> 
      <input class="inScope" type="checkbox" id="chk${inScopeValues.key}" name="chk + ${inScopeValues.key}" value="${inScopeValues.value}"> 
      ${inScopeValues.value} 
     </div> 
     </c:forEach> 

Кнопка & Checkbox ниже ::>

<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2"> 

<button id="chkisc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button> 

Answer 1

Кнопка вы показываете в обновленном вопросе имеет id="chkisc_1", то в вашей функции вы принимаете, что и добавить #chk в его начале, которое будет означает, что вы ищете элемент с селектором "#chkchkisc_1". Между тем, видимо, флажок имеет id="chkisc_2", хотя он, кажется, создается в цикле, поэтому, возможно, есть и _1 (хотя это означает, что у вас есть несколько элементов с одним и тем же идентификатором, что является недопустимым html).

Изменить кнопку, чтобы id="isc_1", а затем, когда ваш JS добавляет #chk он будет искать #chkisc_1:

$('html').on('click', '#inScopeDiv .remButton', function() { 
 
    var currId = $(this).attr('id'); 
 
    var chkBoxId = "#chk"+currId; 
 
    $(chkBoxId).prop("checked", false); 
 
    $('#div'+ currId).remove(); 
 
    $('#inScopeActionDiv' + currId).remove();   
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="inScopeDiv"> 
 

 
<input class="inScope" type="checkbox" id="chkisc_1" name="chkisc_1" value="In Scope 1" checked> 
 
<button id="isc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button> 
 

 
<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2" checked> 
 
<button id="isc_2" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button> 
 
</div>

Answer 2

Вы должны использовать prop() и removeAttr() для достижения этой цели .. Надеюсь, это помогает!

var cb = $("#checkbox") 
 

 
$('#button1').click(function() { 
 
    cb.prop("checked", true) 
 
}) 
 

 
$('#button2').click(function() { 
 
    cb.removeAttr('checked') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="checkbox" />This is a checkbox 
 
<br /> 
 
<br /> 
 
<button id="button1">Check checkbox</button> 
 
<br /> 
 
<br /> 
 
<button id="button2">Uncheck checkbox</button>

Answer 3

let checkbox = document.querySelector("input"); 
 

 
checkbox.addEventListener("click",function(){ 
 
    console.log("Sorry (͡° ͜ʖ ͡°)"); 
 
    this.checked = false; 
 
});

<input type="checkbox" />