Скрыть кнопку, если не установлен флажок

Я хочу скрыть отправку в форме, если не выбран хотя бы один из этих флажков. Вот пример моего зренияСкрыть кнопку, если не установлен флажок

$(document).ready(function() { 
 
    $('input[type=checkbox]').click(function() { 
 
    if ($("#radiobutton :checked") { 
 
     $('#next-container').toggle(); 
 
    } else { 
 
     $('#next-container').hide() 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 

 
<div id="nxtbutton"> 
 
    <div id="next-container"> 
 
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button> 
 
    </div> 
 
</div>

источник

2016-11-03 cazlouise

Проверить длину проверяемых коробки внутри обработчика в change событий, если таковые будут проверены, показать кнопку

$(document).ready(function() { 
 
    var boxes = $(' input[type=checkbox]').on('change', function() { 
 
    var flag = boxes.filter(':checked').length > 0; 
 

 
    $('#next-container').toggle(flag); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<input type="checkbox" checked name="radio" id="radio"> 
 
<br /> 
 
<div id="nxtbutton"> 
 
    <div id="next-container"> 
 
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button> 
 
    </div> 
 
</div>

источник

2016-11-03 16:28:11 adeneo

Используйте .prop('checked') на кнопку флажок, чтобы проверить, является ли она проверяется. Loop thorugh каждый флажок, когда один из флажков имеет событие onchange и поддерживает счетчик.

$(document).ready(function(){ 
 
    
 
$('#nxtBtn').hide(); 
 
$(' input[type="checkbox"]').on('change', function() { 
 
    var count = 0; 
 
       $(' input[type="checkbox"]').each(function(){ 
 
       if($(this).prop('checked')) { 
 
        count++; 
 
        return; 
 
       } 
 
        
 
       }) 
 
       if(count > 0) { 
 
       $('#nxtBtn').show(); 
 
       } 
 
    else { 
 
     $('#nxtBtn').hide(); 
 
    } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<input type="checkbox" name="radio" /> 
 
<input type="checkbox" name="radio" /> 
 
<input type="checkbox" name="radio" /> 
 

 

 
    <div id="nxtbutton"> 
 
      <div id="next-container"> 
 
      <button class="card__btn btn" id="nxtBtn" type="button" >Next</button> 
 
      </div> 
 
      </div>

источник

2016-11-03 16:27:16

вам нужен чтобы скрываться при загрузке страницы.

JS

document.getElementById('nxtBtn').style.visibility = 'hidden';

visibility=hidden очень полезен, но он все равно будет занимать место на странице. Вы можете также использовать display=none

Или попробуйте CSS:

display:block или display:none

Кроме того, изменение if($("#radiobutton :checked"){ в if($("#radiobutton :checked")){. Вам не хватает скобок.

источник

2016-11-03 16:32:17 Zackh105

Я использую это много на своих сайтах. Короткая и сладкая, но все клиентская сторона.

$(document).ready(function(){ 
 
$('#nxtBtn').hide(); 
 
$('#radio').mouseup(function() { 
 
    $('#nxtBtn').toggle(); 
 
}); 
 
});

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<input type="checkbox" name="radio" id="radio"> 
 
<button class="card__btn btn" id="nxtBtn" type="button">Next</button>

источник

2016-11-03 16:36:37 rbreier

Скрыть кнопку, если не установлен флажок

ответ

Смежные вопросы