[jquery] jquery를 사용하여 텍스트 상자를 비활성화 하시겠습니까?

이름이 같고 값이 다른 세 개의 라디오 버튼이 있습니다. 세 번째 라디오 버튼을 클릭하면 확인란과 텍스트 상자가 비활성화되지만 다른 두 라디오 버튼을 선택하면 표시되어야합니다 .Jquery에서 도움이 필요합니다. 감사합니다. 전진….

<form name="checkuserradio">
    <input type="radio" value="1" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="2" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="3" name="userradiobtn" id="userradiobtn"/>
    <input type="checkbox" value="4" name="chkbox" />
    <input type="text" name="usertxtbox" id="usertxtbox" />
</form>

답변

HTML

<span id="radiobutt">
  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="radio" name="rad1" value="3" />
</span>
<div>
  <input type="text" id="textbox1" />
  <input type="checkbox" id="checkbox1" />
</div>

자바 스크립트

  $("#radiobutt input[type=radio]").each(function(i){
    $(this).click(function () {
        if(i==2) { //3rd radiobutton
            $("#textbox1").attr("disabled", "disabled");
            $("#checkbox1").attr("disabled", "disabled");
        }
        else {
            $("#textbox1").removeAttr("disabled");
            $("#checkbox1").removeAttr("disabled");
        }
      });

  });

답변

실제로 필요하지는 않지만 함수 호출을 더 빠르게 만드는 okw의 코드를 약간 개선했습니다 (함수 호출 외부로 조건부를 이동하기 때문입니다).

$("#radiobutt input[type=radio]").each(function(i) {
    if (i == 2) { //3rd radiobutton
        $(this).click(function () {
            $("#textbox1").attr("disabled", "disabled");
            $("#checkbox1").attr("disabled", "disabled");
        });
    } else {
        $(this).click(function () {
            $("#textbox1").removeAttr("disabled");
            $("#checkbox1").removeAttr("disabled");
        });
    }
});

답변

이 스레드는 약간 오래되었지만 정보를 업데이트해야합니다.

http://api.jquery.com/attr/

양식 요소의 선택, 선택 또는 비활성화 상태와 같은 DOM 속성을 검색하고 변경하려면 .prop () 메서드를 사용합니다.

$("#radiobutt input[type=radio]").each(function(i){
$(this).click(function () {
    if(i==2) { //3rd radiobutton
        $("#textbox1").prop("disabled", true);
        $("#checkbox1").prop("disabled", true);
    }
    else {
        $("#textbox1").prop("disabled", false);
        $("#checkbox1").prop("disabled", false);
    }
  });
});

답변

이러한 솔루션 중 일부가 .each ()를 사용하는 이유를 잘 모르겠습니다. 필요하지 않습니다.

다음은 세 번째 확인란을 클릭하면 비활성화되고 그렇지 않으면 비활성화 된 속성을 제거하는 작동 코드입니다.

참고 : 확인란에 ID를 추가했습니다. 또한 ID는 문서에서 고유해야하므로 라디오 버튼에서 ID를 제거하거나 고유하게 만드십시오.

$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

답변

나는 오래된 질문에 대답하는 것이 좋은 습관이 아니라는 것을 알고 있지만 나중에 질문을 볼 사람들을 위해이 대답을 넣었습니다.

이제 JQuery에서 상태를 변경하는 가장 좋은 방법은

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

전체 그림은이 링크를 확인하십시오.
jQuery로 입력을 비활성화 / 활성화 하시겠습니까?

답변

조금 다르게했을 텐데

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />

통지 클래스 속성

 $(document).ready(function() {
    $('.disablebox').click(function() {
        $('.showbox').attr("disabled", true);
    });
});

이렇게하면 자바 스크립트 변경에 대해 걱정할 필요가없는 라디오 버튼을 더 추가해야합니다.

답변

“클릭”이벤트를 여러 라디오 버튼에 바인딩하고, 클릭 한 라디오 버튼의 값을 읽고, 값에 따라 확인란 및 / 또는 텍스트 상자를 비활성화 / 활성화하고 싶을 것 같습니다.

function enableInput(class){
    $('.' + class + ':input').attr('disabled', false);
}

function disableInput(class){
    $('.' + class + ':input').attr('disabled', true);
}

$(document).ready(function(){
    $(".changeBoxes").click(function(event){
        var value = $(this).val();
        if(value == 'x'){
            enableInput('foo'); //with class foo
            enableInput('bar'); //with class bar
        }else{
            disableInput('foo'); //with class foo
            disableInput('bar'); //with class bar
        }
    });
});