반응형
jQuery - 확인란 사용/사용 안 함
이런 확인란이 많이 있습니다.Check Me(확인) 확인란이 선택된 경우 다른 3개의 확인란을 모두 사용 가능으로 설정해야 하며, 그렇지 않으면 사용 불가능으로 설정해야 합니다.jQuery를 사용하여 이 작업을 수행하려면 어떻게 해야 합니까?
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>
마크업을 약간 변경합니다.
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>
<input type="checkbox" name="chk9[120]" class="group1"><br>
<input type="checkbox" name="chk9[140]" class="group1"><br>
<input type="checkbox" name="chk9[150]" class="group1"><br>
</form>
ID와 클래스를 소개하지 않고 속성 선택기를 사용하여 이 작업을 수행할 수 있지만 속도가 느리고 읽기가 더 어렵습니다.
이것이 가장 최신의 해결책입니다.
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1" />Check Me
<input type="checkbox" name="chk9[120]" class="group1" />
<input type="checkbox" name="chk9[140]" class="group1" />
<input type="checkbox" name="chk9[150]" class="group1" />
</form>
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
$("input.group1").prop("disabled", !this.checked);
}
다음은 에 대한 사용 세부 정보입니다..attr()
그리고..prop()
.
jQuery 1.6+
새 기능을 사용합니다.
$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);
jQuery 1.5 이하
그.prop()
기능을 사용할 수 없으므로 사용해야 합니다..attr()
.
확인란을 비활성화하려면(비활성화된 특성의 값을 설정하여) 다음을 수행합니다.
$("input.group1").attr('disabled','disabled');
그리고 (속성을 완전히 제거함으로써) 가능하게 하기 위해.
$("input.group1").removeAttr('disabled');
모든 버전의 jQuery
하나의 요소로 작업하는 경우에는 항상 사용하는 것이 가장 빠릅니다.DOMElement.disabled = true
사용 시의 이점.prop()
그리고..attr()
함수는 일치하는 모든 요소에서 작동한다는 것입니다.
// Assuming an event handler on a checkbox
if (this.disabled)
ref: jQuery를 사용하여 확인란에 "체크됨"을 설정하시겠습니까?
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>
$("#chkAll").click(function() {
$(".chkGroup").attr("checked", this.checked);
});
모든 개별 확인란을 선택한 경우 모든 확인란을 선택/해제하는 기능이 추가되었습니다.
$(".chkGroup").click(function() {
$("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});
다음은 JQuery 1.10.2를 사용한 다른 샘플입니다.
$(".chkcc9").on('click', function() {
$(this)
.parents('table')
.find('.group1')
.prop('checked', $(this).is(':checked'));
});
$(document).ready(function() {
$('#InventoryMasterError').click(function(event) { //on click
if (this.checked) { // check select status
$('.checkerror').each(function() { //loop through each checkbox
$('#selecctall').attr('disabled', 'disabled');
});
} else {
$('.checkerror').each(function() { //loop through each checkbox
$('#selecctall').removeAttr('disabled', 'disabled');
});
}
});
});
$(document).ready(function() {
$('#selecctall').click(function(event) { //on click
if (this.checked) { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
$('#InventoryMasterError').attr('disabled', 'disabled');
});
} else {
$('.checkbox1').each(function() { //loop through each checkbox
$('#InventoryMasterError').removeAttr('disabled', 'disabled');
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selecctall" name="selecctall" value="All" />
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />
$jQuery(function() {
enable_cb();
jQuery("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
jQuery("input.group1").removeAttr("disabled");
} else {
jQuery("input.group1").attr("disabled", true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>
<input type="checkbox" name="chk9[120]" class="group1"><br>
<input type="checkbox" name="chk9[140]" class="group1"><br>
<input type="checkbox" name="chk9[150]" class="group1"><br>
</form>
언급URL : https://stackoverflow.com/questions/2330209/jquery-checkbox-enable-disable
반응형
'programing' 카테고리의 다른 글
목표-C에서 NSString 토큰화 (0) | 2023.05.27 |
---|---|
std::벡터 대 표준::C++의 배열 (0) | 2023.05.22 |
Swift의 URL에서 이미지 로드/다운로드 (0) | 2023.05.22 |
VBA 컬렉션에서 키/값 쌍을 루프할 수 있습니까? (0) | 2023.05.22 |
ngIf inside ngFor 매개변수가 있는 Angular - ng-template (0) | 2023.05.22 |