체크 박스 변경 이벤트를 통한 입력 값 변경

이지

다른 ID의 두 개의 확인란과 다른 텍스트 상자와 다른 div4 개의 라디오 버튼으로 구성된 라디오 그룹 이있는 페이지가 있습니다 div. 내가 달성하려는 것은 다음과 같습니다.

사용자가 첫 번째 확인란을 선택하면 다음이 발생합니다.

  1. 비활성화 할 확인란 2
  2. 값이 0이고 읽기 전용이되도록 텍스트 상자
  3. 첫 번째 라디오가 선택되고 레이블과 함께 숨겨집니다.

사용자가 첫 번째 확인란을 선택 취소하면 위 단계를 다시 확인해야합니다.

사용자가 두 번째 확인란을 선택하면 다음이 발생합니다.

  1. 비활성화 할 확인란 하나
  2. 1 abd 값을 갖는 텍스트 상자가 읽기 전용으로 설정 됨
  3. 첫 번째 라디오가 선택되고 레이블과 함께 숨겨집니다.

사용자가 두 번째 확인란을 선택 취소하면 위 단계를 다시 수행해야합니다.

나는 다음 코드를 생각 해냈다.

$("#firstCheckBox").on("change", function () {
    if ($(this).is(":checked")) {
        $('#secondCheckBox').prop('disabled', true);
        $('#spinner').val('0');
        $('#spinner').prop('readonly', true);
        $('#radio_id:first').prop('checked', true);
        $('#radio_id:not(:checked)').hide();

    } else {
        $('#secondCheckBox').prop('disabled', false);
        $('#spinner').val('');
        $('#spinner').prop('readonly', false);
        $('#radio_id:first').prop('checked', false);
        $('#radio_id:not(:checked)').show();
    }
});
$("#secondCheckBox").on("change", function () {
    if ($(this).is(":checked")) {
        $('#firstCheckBox').prop('disabled', true);
        $('#spinner').val('1');
        $('#spinner').prop('readonly', true);
        $('#radio_id:first').prop('checked', true);
        $('#radio_id:not(:checked)').hide();

    } else {
        $('#firstCheckBox').prop('disabled', false);
        $('#spinner').val('');
        $('#spinner').prop('readonly', false);
        $('#radio_id:first').prop('checked', false);
        $('#radio_id:not(:checked)').show();
    }
});

그래서 제 질문은 더 나은 방법이 있습니까? 아니면 올바른 길을 가고 있습니까?

밀린 드 아난 트와 르

이 같은:

var $targetCheckBoxes = $("#firstCheckBox,#secondCheckBox");
$targetCheckBoxes.change(function () {
  var isChecked = this.checked;
  var currentElement = this;
  $targetCheckBoxes.filter(function(){
    return  this.id  != currentElement.id;
  }).prop('disabled', isChecked );
  $('#spinner').val( isChecked  ? this.value : '');
  $('#spinner').prop('readonly', isChecked);
  $('#radio_id').toggle(isChecked).prop('checked', isChecked );
});

작동 데모

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

체크 박스 선택시 텍스트 입력 값 변경

분류에서Dev

체크 박스 선택시 텍스트 입력 값 변경

분류에서Dev

자바 스크립트를 통해 입력 값 변경

분류에서Dev

입력 유형 스크립트에서 이벤트 값 변경

분류에서Dev

링크를 통한 JavaScript 변경 입력 값

분류에서Dev

체크 박스 체크시 텍스트 박스 값 변경에 대한 jquery 함수

분류에서Dev

변경된 이벤트 리스너를 통해 체크 박스의 체크 속성을 설정하는 방법

분류에서Dev

체크 박스 변경 이벤트 처리를위한 이벤트 핸들러를 구별하는 방법

분류에서Dev

체크 박스 변경을 통한 데이터베이스 업데이트

분류에서Dev

입력 변경 및 체크 박스 변경시 기능 실행

분류에서Dev

체크 박스 체크 / 체크 해제시 변수 값 변경

분류에서Dev

콤보 박스 변경시 체크 박스 및 텍스트 값 제거

분류에서Dev

JButton의 이벤트 리스너를 통해 변수 값 변경

분류에서Dev

체크 한 경우에만 체크 박스 값을 변수에 전달

분류에서Dev

입력 텍스트 값 변경시 Ionic 화재 이벤트

분류에서Dev

체크 박스 조건에서 변수 값이 변경되지 않음

분류에서Dev

플래시-체크 박스, 이벤트 변경

분류에서Dev

입력 텍스트 값 변경 vuex

분류에서Dev

입력 텍스트 값 변경 JS

분류에서Dev

자바 스크립트 변경 입력 값

분류에서Dev

react.js 자바 스크립트로 입력 값 변경

분류에서Dev

입력 쌍 자바 스크립트의 값 변경

분류에서Dev

옵션 선택시 자바 스크립트 변경 입력 값

분류에서Dev

변경 이벤트에서 체크 박스 상태를 확인하는 방법

분류에서Dev

체크 박스 값을 변경하는 방법은 무엇입니까?

분류에서Dev

체크 된 경우 체크 박스의 값을 변경하는 방법은 무엇입니까?

분류에서Dev

체크되면 각 체크 박스의 변경 이벤트 발생

분류에서Dev

Powershell : 이벤트 핸들러가 for 루프 내부에있을 때 체크 박스 변경 이벤트가 유효한 결과를 제공하지 않습니다.

분류에서Dev

자바 스크립트를 통해 값이 변경 될 때 테이블의 텍스트 입력이 업데이트되지 않음

Related 관련 기사

  1. 1

    체크 박스 선택시 텍스트 입력 값 변경

  2. 2

    체크 박스 선택시 텍스트 입력 값 변경

  3. 3

    자바 스크립트를 통해 입력 값 변경

  4. 4

    입력 유형 스크립트에서 이벤트 값 변경

  5. 5

    링크를 통한 JavaScript 변경 입력 값

  6. 6

    체크 박스 체크시 텍스트 박스 값 변경에 대한 jquery 함수

  7. 7

    변경된 이벤트 리스너를 통해 체크 박스의 체크 속성을 설정하는 방법

  8. 8

    체크 박스 변경 이벤트 처리를위한 이벤트 핸들러를 구별하는 방법

  9. 9

    체크 박스 변경을 통한 데이터베이스 업데이트

  10. 10

    입력 변경 및 체크 박스 변경시 기능 실행

  11. 11

    체크 박스 체크 / 체크 해제시 변수 값 변경

  12. 12

    콤보 박스 변경시 체크 박스 및 텍스트 값 제거

  13. 13

    JButton의 이벤트 리스너를 통해 변수 값 변경

  14. 14

    체크 한 경우에만 체크 박스 값을 변수에 전달

  15. 15

    입력 텍스트 값 변경시 Ionic 화재 이벤트

  16. 16

    체크 박스 조건에서 변수 값이 변경되지 않음

  17. 17

    플래시-체크 박스, 이벤트 변경

  18. 18

    입력 텍스트 값 변경 vuex

  19. 19

    입력 텍스트 값 변경 JS

  20. 20

    자바 스크립트 변경 입력 값

  21. 21

    react.js 자바 스크립트로 입력 값 변경

  22. 22

    입력 쌍 자바 스크립트의 값 변경

  23. 23

    옵션 선택시 자바 스크립트 변경 입력 값

  24. 24

    변경 이벤트에서 체크 박스 상태를 확인하는 방법

  25. 25

    체크 박스 값을 변경하는 방법은 무엇입니까?

  26. 26

    체크 된 경우 체크 박스의 값을 변경하는 방법은 무엇입니까?

  27. 27

    체크되면 각 체크 박스의 변경 이벤트 발생

  28. 28

    Powershell : 이벤트 핸들러가 for 루프 내부에있을 때 체크 박스 변경 이벤트가 유효한 결과를 제공하지 않습니다.

  29. 29

    자바 스크립트를 통해 값이 변경 될 때 테이블의 텍스트 입력이 업데이트되지 않음

뜨겁다태그

보관