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

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

이름이 같고 값이 다른 라디오 버튼이 3개 있습니다.세 번째 라디오 버튼을 클릭하면 확인란과 텍스트 상자가 비활성화됩니다.하지만 내가 다른 두 라디오 버튼을 선택할 때는 그것은 반드시 표시되어야 합니다.저는 쥬리의 도움이 필요합니다.미리 감사드립니다..

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

  });

꼭 필요한 것은 아니지만, (기능 호출 외부의 조건부를 이동시키므로) 기능 호출을 더 빨리 할 수 있는 OK.W.의 코드를 약간 개선한 것입니다.

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

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

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

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

파티에 너무 늦어서 죄송합니다만, 개선의 여지가 있습니다."텍스트 상자 비활성화"에 관한 것이 아니라, 라디오 상자 선택 및 코드 단순화에 관한 것으로, 나중에 변경할 때를 위해 좀 더 미래의 증거가 될 수 있습니다.

우선 .ach()를 사용하지 말고 색인을 사용하여 특정 라디오 버튼을 가리켜서는 안 됩니다.동적 라디오 버튼 세트로 작업하거나 나중에 라디오 버튼을 추가하거나 제거하면 코드가 잘못된 버튼에서 반응합니다!

다음으로, OP가 만들어졌을 때는 그렇지 않았을 겁니다.on('클릭', function(){...})을(를) 클릭하는 대신...http://api.jquery.com/on/

마지막으로, 코드는 이름을 기반으로 라디오 버튼을 선택함으로써 좀 더 간단하고 미래의 증거가 될 수 있습니다(하지만 이미 게시물에 나타난).

그래서 저는 결국 다음과 같은 코드를 갖게 되었습니다.

HTML (o.k.w 코드 기준)

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

JS코드

$("[name='rad1']").on('click', function() {
    var disable = $(this).val() === "2";
    $("#textbox1").prop("disabled", disable); 
    $("#checkbox1").prop("disabled", disable); 
});

MVC 4 @Html.CheckBox일반적으로 사람들은 mvc 확인란의 선택과 선택을 취소할 때 작업을 수행하기를 원합니다.

<div class="editor-field">
    @Html.CheckBoxFor(model => model.IsAll, new { id = "cbAllEmp" })
</div>

변경할 컨트롤에 대해 id를 정의하고 자바스크립트에서 다음을 수행할 수 있습니다.

<script type="text/javascript">
    $(function () {
        $("#cbAllEmp").click("", function () {
            if ($("#cbAllEmp").prop("checked") == true) {
                    $("#txtEmpId").hide();
                    $("#lblEmpId").hide();
                }
                else {
                    $("#txtEmpId").show();
                    $("#txtEmpId").val("");
                    $("#lblEmpId").show();
             }
        });
    });

당신은 또한 다음과 같이 부동산을 바꿀 수 있습니다.

$("#txtEmpId").prop("disabled", true); 
$("#txtEmpId").prop("readonly", true); 

$(document).ready(function () {
   $("#txt1").attr("onfocus", "blur()");
});

$(document).ready(function () {
  $("#txt1").attr("onfocus", "blur()");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="txt1">

라디오 버튼 값을 가져오고 3이면 각각과 일치합니다. 그리고 비활성화됩니다.checkbox and textbox.

$("#radiobutt input[type=radio]").click(function () {
    $(this).each(function(index){
    //console.log($(this).val());
        if($(this).val()==3) { //get radio buttons value and matched if 3 then disabled.
            $("#textbox_field").attr("disabled", "disabled"); 
            $("#checkbox_field").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox_field").removeAttr("disabled"); 
            $("#checkbox_field").removeAttr("disabled"); 
        }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="radiobutt">
  <input type="radio" name="groupname" value="1" />
  <input type="radio" name="groupname" value="2" />
  <input type="radio" name="groupname" value="3" />
</span>
<div>
  <input type="text" id="textbox_field" />
  <input type="checkbox" id="checkbox_field" />
</div>

언급URL : https://stackoverflow.com/questions/1648901/disable-textbox-using-jquery