체크 박스가 선택되지 않은 경우 버튼 숨기기

적어도 하나의 체크 박스가 선택되지 않은 경우 양식 버튼으로 제출을 숨기려고합니다. 여기이 선택되어 있는지 여부를 확인하는 체크 박스 버튼을 내보기체크 박스가 선택되지 않은 경우 버튼 숨기기

$(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

당신이 필요로하는 버튼

출처

2016-11-03 16:28:11 adeneo

사용 .prop('checked')의 샘플입니다. 확인란 중 하나에 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

$(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>

어떤을 선택하는 경우,하는 change 이벤트 핸들러 내에서 체크 박스의 길이를 확인 표시 버튼을 숨길 수 있습니다.

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

visibility=hidden

JS

은 매우 유용하지만, 여전히 페이지에서 공간을 차지합니다.

display:block 나 또한

display:none, if($("#radiobutton :checked")){에 if($("#radiobutton :checked"){을 변경 또한이 CSS 시도 display=none

를 사용하거나 할 수 있습니다. 괄호가 없습니다.

출처

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

체크 박스가 선택되지 않은 경우 버튼 숨기기

답변

관련 문제