JavaScript에서이 jQuery를 작동시키는 방법

Question

jQuery를 일반적인 자바 스크립트로 변환하는 데 많은 문제가 있습니다. 나는 신선한 프로그래머이고 이것을 작동시키기가 꽤 어렵다.

나는 코드가 있습니다

<input type="checkbox" name="msg[]" value="26" class="checkbox" /> 
<button type="submit" class="delete" disabled="disabled">Delete</button> 

$(function() { 
    $(".checkbox").click(function(){ 
    $('.delete').prop('disabled',$('input.checkbox:checked').length == 0); 
    }); 
}); 

는 예를 들어, 당신은 여기 Example

그것을 시도 할 수 있습니다하지만 자바 스크립트와이를 사용하는 방법?

내 프로그램에서 예제 사이트에서이 코드를 실행할 수 없습니다.

Answer 1

이 내가 의도는 적어도 하나 개의 체크 박스가 체크되어 있지 않으면 버튼이 비활성화되어야한다고 가정하겠습니다

document.addEventListener('DOMContentLoaded', function(){ 
    var button = document.querySelector('.delete'); 
    document.querySelectorAll('input[type=checkbox]').forEach(function(checkbox){ 
    checkbox.addEventListener("change", function(e){ 
     button.disabled = document.querySelectorAll('input.checkbox:checked').length == 0; 
    }); 
    }); 

}, false); 

Answer 2

할 것입니다.

// When the DOM is loaded 
 
document.addEventListener("DOMContentLoaded", function() { 
 
    // bind a click handler to the checkboxes' parent element 
 
    document.addEventListener("click", function(e) { 
 
    // when a click occurs test if the target element has the "checkbox" class 
 
    if (e.target.classList.contains("checkbox")) { 
 
     // if so, set the disabled state of the button 
 
     document.querySelector(".delete").disabled = 
 
      // based on whether at least one checkbox is checked 
 
      document.querySelectorAll("input.checkbox:checked").length === 0; 
 
    } 
 
    }); 
 
});

<input type="checkbox" name="msg[]" value="32" class="checkbox" /> 
 
<input type="checkbox" name="msg[]" value="44" class="checkbox" /> 
 
<input type="checkbox" name="msg[]" value="26" class="checkbox" /> 
 

 
<button type="submit" class="delete" disabled="disabled">Delete</button>

나는이 케이스 document에 (부모 요소에 한 번의 클릭 핸들러를 결합했기 때문에 내 코드는 직접 jQuery를 일치하지 않는,하지만 실제 페이지에서 다음을 수행해야 체크 박스의 가장 가까운 부모 요소에 바인드하십시오.) 모든 체크 박스에 바인딩하는 대신, 그렇지 않으면 거의 동일한 것입니다.

모든 최신 브라우저가 .classList을 지원하지만 IE < 10은 지원하지 않습니다. 또한 the DOMContentLoaded event 및 addEventListener() method 9.

Answer 3

IE <에서 지원되지 않습니다 여기에 내 솔루션 당신이 보여준 코드는 하나 개의 체크 박스를 가지고

var checkboxElements = window.document.getElementsByClassName("checkbox"); 
var deleteButtons = window.document.getElementsByClassName("delete"); 
var numberOfCheckboxesChecked = 0; 

for(i =0; i < checkboxElements.length; i++) 
{ 
    checkboxElements[i].onclick = checkboxClick; 
} 

function setDeleteButtonsState(){ 

    for(i =0; i < deleteButtons.length; i++) 
    { 
    deleteButtons[i].disabled = numberOfCheckboxesChecked > 0 ? "" : "disabled"; 
    } 

} 

function checkboxClick() 
{ 
    if(this.checked === true) 
    { 
    numberOfCheckboxesChecked++; 
    } 
    else 
    { 
    numberOfCheckboxesChecked--; 
    } 
    setDeleteButtonsState(); 
}