[jQuery] 라디오버튼 비활성화 값 가져오기
아래는 라디오 버튼에 관한 예 입니다.
체크박스와 크게 다르지 않기 때문에 더 많은 예는 체크박스 것을 보면 됩니다.
그리고 라디오 버튼은 여러개가 있을 경우 1개만 선택이 가능한 버튼을 말합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery test </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form>
<input type="radio" id="one1" name="oneBox" value="1"> one1
<input type="radio" id="one2" name="oneBox" value="2"> one2
<input type="radio" id="one3" name="oneBox" value="3"> one3
<input type="radio" id="one4" name="oneBox" value="4"> one4
</form>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function()
{
console.log('션택된 값:', $(":input:radio[name=oneBox]:checked").val() );
// index는 0부터 시작 한다
$(":input:radio[name=oneBox]").eq(2).prop('checked', true);
console.log('션택된 값:', $(":input:radio[name=oneBox]:checked").val() );
$(":input:radio[name=oneBox]").eq(2).prop('disabled', true);
console.log('션택된 값:', $(":input:radio[name=oneBox]:checked").val(), ' radio 버튼 갯수: ', $("[name=oneBox]").length );
// 갯수
var num1 = $('input[name="oneBox"]').length;
var num2 = $('input[name="oneBox"]:checked').length;
var num3 = $('input[name="oneBox"]:not(:checked)').length;
console.log('전채갯수:', num1, ' 선택된갯수:', num2, ' 선택되지 않은 갯수:', num3);
// disabled 상태이면 true
var is_disabled2 = $('#one2').prop('disabled');
var is_disabled3 = $('#one3').prop('disabled');
console.log('2번째:', is_disabled2, '3번째:', is_disabled3);
// 선택되었으면 true
var is_checked3 = $('#one3').prop('checked');
var is_checked4 = $('#one4').prop('checked');
console.log('3번째:', is_checked3, '4번째:', is_checked4);
});
</script>
* 참고할것
[jQuery] 체크박스 값변경 선택 및 감지하기 > javascript
[jQuery] select 박스 값변경 및 index 가져오기와 삭제 방법
[jQuery] input 박스 같은이름 배열형태로 넘기는 경우체크
