desativar caixa de texto usando jquery?

Eu tenho três botões de opção com o mesmo nome e valores diferentes. Quando eu clico no terceiro botão de opção, a caixa de seleção e a caixa de texto serão desabilitadas. Mas quando eu escolher outros dois botões de opção, ele deve ser mostrado. Preciso da ajuda no Jquery. Obrigado em avançar....

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

Javascript

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

  });

Não é realmente necessário, mas uma pequena melhoria no código do okw que tornaria a chamada de função mais rápida (já que você está movendo a condicional para fora da chamada de função).

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

Este tópico é um pouco antigo, mas as informações devem ser atualizadas.

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

Para recuperar e alterar as propriedades do DOM, como o estado verificado, selecionado ou desabilitado dos elementos do formulário, use o método .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);
    }
  });
});

Não sei por que algumas dessas soluções usam .each () - não é necessário.

Aqui está um código de trabalho que desativa se a terceira caixa de seleção for clicada, caso contrário, remove o atributo desativado.

Nota: Eu adicionei um id à caixa de seleção. Além disso, lembre-se de que os ids devem ser exclusivos em seu documento, portanto, remova os ids dos botões de opção ou torne-os exclusivos

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

Eu sei que não é um bom hábito responder a uma pergunta antiga, mas estou colocando esta resposta para as pessoas que veriam a pergunta depois.

A melhor maneira de alterar o estado em JQuery agora é por meio

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

Por favor, verifique este link para ilustração completa. Desativar / ativar uma entrada com jQuery?

Eu teria feito um pouco diferente

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

Observe o atributo de classe

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

Desta forma, se você precisar adicionar mais botões de rádio, não precisa se preocupar em alterar o javascript

Suponho que você provavelmente deseja vincular um evento de "clique" a vários botões de opção, ler o valor do botão de opção clicado e, dependendo do valor, desabilitar / habilitar uma caixa de seleção e / ou caixa de texto.

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

Desculpe pelo atraso na festa, mas vejo que há espaço para melhorias aqui. Não em relação ao "desabilitar caixa de texto", mas à seleção e simplificação do código do radionbox, tornando-o um pouco mais à prova de futuro, para alterações posteriores.

Em primeiro lugar, você não deve usar .each () e usar o índice para apontar um botão de rádio específico. Se você trabalhar com um conjunto dinâmico de botões de opção ou se adicionar ou remover alguns botões de opção posteriormente, seu código reagirá ao botão errado!

Em seguida, mas provavelmente não era o caso quando o OP foi feito, eu prefiro usar .on ('click', function () {...}) em vez de clicar ... http: //api.jquery. com / em /

Lst mas não menos importante, também o código poderia ser feito mais simples e à prova de futuro, selecionando o botão de rádio com base em seu nome (mas que já apareceu em uma postagem).

Então acabei com o seguinte código.

HTML (baseado no código de okw)

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

Código JS

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

MVC 4 @ Html.CheckBoxFor geralmente as pessoas querem uma ação marcando e desmarcando a caixa de seleção mvc.

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

você pode definir o id para os controles que deseja alterar e em javascript fazer o seguinte

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

você também pode alterar a propriedade como

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

obtém o valor dos botões de opção e corresponde a cada um se for 3 e então desativado 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>