Включить/отключить кнопку в зависимости от флажков

Question

Я пытаюсь с сегодняшнего утра создать код с помощью jQuery, который позволяет включать/отключать кнопку отправки, когда я нажимаю на флажок. Я пытаюсь написать весь этот код внутри функции, которая будет вызываться на каждом клике.

Проблема в том, что он отлично работает на JSFiddle, но на моем компьютере один раз, когда кнопка включена, я не могу отключить ее, сняв флажки.

У вас есть идея решить эту проблему?

Благодарим вас за это.

Это мой код:

function activeBouton() { 
 
    var countChecked = function() { 
 
    var n = $("input:checked").length; 
 
    \t if (n == 0) jQuery('button').prop('disabled', true); 
 
\t else jQuery('button').prop('disabled', false); 
 
    }; 
 
    countChecked(); 
 
    $("input[type=checkbox]").on("click", countChecked);  
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div onclick="activeBouton()"> 
 
    <input type="checkbox" name="nom" value="1" /> Item un 
 
    <input type="checkbox" name="nom" value="2" /> Item deux 
 
    <input type="checkbox" name="nom" value="3" /> Item trois 
 
</div> 
 
<button id="activeBtn" disabled>Add</button>

Answer 1

Общепринятый фрагмент немного запутан. activeBouton функции крепятся с помощью click обработчика div, который звонит countChecked() & это называется, если есть какие-либо изменения в checkbox

Это может быть упрощено. Наряду с этим существует большая разница между LOAD TYPE, как onLoad, onDOMReady, body & head in jsfiddle. Так что это будет полезно, если это возможно, чтобы показать, где вы ставите свой код, когда вы работаете свой код в браузере

Надежда этот фрагмент будет полезен

function countChecked() { 
    if ($('input[name="nom"]:checked').length > 0 && $("#activeBtn").is(':disabled')) { 
     $("#activeBtn").removeAttr('disabled') 
    } else if ($('input[name="nom"]:checked').length == 0) { 
     $("#activeBtn").attr('disabled', true) 
    } 
}; 
$('input[name="nom"]').on("change", function(event) { 
    countChecked(); // Call countChecked event on change in checkbox 
}); 

Проверить это jsfiddle

Answer 2

При попытке запустить скрипку, я получаю следующее сообщение об ошибке.

Uncaught ReferenceError: activeBouton is not defined.

Не знаю, почему вы пытаетесь связать событие щелчка в DIV с атрибутом onclick, когда вы уже связыванием события нажатия на отдельные флажки с JQuery.

Попробуйте сделать это таким образом, вместо этого:

$(document).ready(function() { 
    var countChecked = function() { 
    var n = $("input:checked").length; 
    if (n == 0) jQuery('button').prop('disabled', true); 
    else jQuery('button').prop('disabled', false); 
    }; 

    $("input[type=checkbox]").on("click", countChecked); 
}); 

И избавиться от атрибута onclick на ваше окружение <div>.

Обновлено fiddle.