jQuery-확인란 활성화 / 비활성화

234

나는 이와 같은 확인란을 가지고 있습니다. "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>

jquery

— 제이크
소스

413

마크 업을 약간 변경하십시오.

$(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와 클래스를 소개하지 않고 속성 선택기를 사용하여이 작업을 수행 할 수 있지만 읽기 속도가 느리고 읽기가 더 어렵습니다.

— 클레 투스
소스

3

비활성화 부분에 대해서는 다음 URL을 시도하십시오. jquery-howto.blogspot.com/2008/12/…

— Walt Stoneburner

3

이것은 질문과 직접 관련이 없지만 IE에서는 확인란이 포커스를 잃을 때까지 변경 이벤트가 시작되지 않습니다. 나는 보통 $(this).change첫 번째 확인란의 클릭 이벤트를 호출 합니다.

— mcrumley

10

.prop()대신 사용할 수 있습니다 .attr().

— Reza Owliaei

5

.prop ()에 문제가 있었지만 초기 설정에서 작동했지만 앞뒤로 전환하면 두 번째로 확인란을 "비활성화"하지 못했습니다. attr ()에 붙어 있습니다.

— ProVega

3

@ProVega 문제를 설명 할 수 있습니다.

— Andrew

100

이것이 가장 최신 솔루션입니다.

<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 이상

새로운 .prop()기능을 사용하십시오 :

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

jQuery 1.5 이하

이 .prop()기능을 사용할 수 없으므로를 사용해야 .attr()합니다.

disabled 속성 값을 설정하여 확인란을 비활성화하려면

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

심판 : jQuery와 함께 확인란에 "체크"설정?

— 로이드 키
소스

2

나처럼 asp : CheckBox를 사용하는 사람들은 브라우저에서 범위 내 입력으로 렌더링됩니다. 그래서 제 경우에는 $ ( '. checkboxClassName input'). prop ( 'disabled', false) ...로 jQuery를 사용하여 액세스해야했고 'enabled'를 변경하려고 시도해도 나에게 도움이되지 않았습니다.) 이 답변에!

— deebs

10

<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;
});

— 진 코프
소스

1

다음은 JQuery 1.10.2를 사용하는 다른 샘플입니다.

$(".chkcc9").on('click', function() {
            $(this)
            .parents('table')
            .find('.group1') 
            .prop('checked', $(this).is(':checked')); 
});

— 파올로 게바라
소스

1

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

스 니펫 확장

— 왕자
소스

0

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

스 니펫 확장

— 구 반치 호야 모프
소스