Как выбрать длину выбранного флажка с помощью селектора имени

Question

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

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

Вот код, который я пробовал:

$('input').change(function() {
      console.log('cheeck box change');
    if ($("input[name='name1']:checked").length) {
        
        $('#sub').removeAttr('disabled');
    } else {
        $('#sub').attr('disabled', 'disabled');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>

<input id='sub' type='button' value='Submit' disabled='disabled'>

Answer 1

Попробуйте это решение.

$('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            document.getElementById("sub").disabled = true;
        }
        else if($(this).prop("checked") == false){
            document.getElementById("sub").disabled = false;
        }
    });

И проверьте эту ссылку: Попробуйте эту ссылку

Answer 2

Этот скрипт может помочь вам написать его простым способом.Просто установите флажки

$("input[type='checkbox']") и нажмите $("input[type='submit']").attr("disabled", !checkboxes.is(":checked"));

полный исходный код здесь

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>

<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
    <div>
        <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
    </div>
    <div>
        <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
    </div>
    <div>
        <input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
    </div>
    <div>
        <input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
    </div>
    
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>

Источник: http://jsfiddle.net/chriscoyier/BPhZe/76/

Это работа Криса Койера, Спасибо, Крис.

Answer 3

Похоже, что вы делаете небольшую ошибку в своем селекторе "input[name='name1']:checked", которая должна вместо этого быть примерно такой: "input[type='checkbox']:checked".

В настоящее время "вы выбираете элементы ввода, которые имеют name='name1'который не будет соответствовать ни одному из ваших флажков, потому что ни один из них не имеет атрибутов имени со значением "name1".

Итак, рассмотрим следующее изменение:

$('input').change(function() {
      console.log('cheeck box change');
    if ($("input[type='checkbox']:checked").length) { // <-- update this line
        
        $('#sub').removeAttr('disabled');
    } else {
        $('#sub').attr('disabled', 'disabled');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>

<input id='sub' type='button' value='Submit' disabled='disabled'>

Если вам нужно, чтобы ваша форма работала таким образом, и вы хотите выбирать элементы с помощью селектора имен, вы можете сделать что-то вроде этого:

$('input').change(function() {
      console.log('cheeck box change');
    if ($("input[name]:checked").length) { // <-- update this line
        
        $('#sub').removeAttr('disabled');
    } else {
        $('#sub').attr('disabled', 'disabled');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type='checkbox' name='name-1' class='check'> Value</p>
<p><input type='checkbox' name='name-2' class='check'> Value</p>
<p><input type='checkbox' name='name-3' class='check'> Value</p>
<p><input type='checkbox' name='name-4' class='check'> Value</p>
<p><input type='checkbox' name='name-5' class='check'> Value</p>

<input id='sub' type='button' value='Submit' disabled='disabled'>