deshabilitar el cuadro de texto con jquery?

Tengo tres botones de radio con el mismo nombre y diferentes valores.Cuando hago clic en el tercer botón de radio de la casilla de verificación y un cuadro de texto va a ser desactivada.pero a la hora de elegir otras dos botones de radio se debe mostrar.Necesito la ayuda de Jquery.Gracias de antemano….

<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>
  • Debe quitar el id idéntico. names pueden ser idénticos, pero ids debe ser único.
InformationsquelleAutor svk | 2009-10-30

11 Kommentare

  1. 203

    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"); 
            }
          });
    
      });
    • Uy, empecé a programar la respuesta antes de ver su ejemplo de fragmento de código
    • Matt respuesta es más eficiente. Tomar la mina como un no tan buen ejemplo.
    • Aquí donde podemos definir: i valor.
    • se pasa de function(i) a través de JQuery,each(). i==2 se utiliza para acceder a la 3ª botón de radio. Consulte mis códigos.
    • ninguna misericordia para los navegadores más antiguos ?
    • <span id="radiobutt"> — Primo de RadioHead?

  2. 27

    No es realmente necesario, pero una pequeña mejora para o.k.w.’s código que haría la función de llamada más rápido (ya que usted está en movimiento la condicional fuera de la llamada a la función).

    $("#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");
            });
        }
    });
    • eso es una mejora, de hecho 🙂
  3. 21

    Este hilo es un poco antiguo, pero la información debe ser actualizada.

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

    Para recuperar y modificar las propiedades DOM, tales como el marcado, seleccionado,
    o personas con discapacidad del estado de los elementos de formulario, utilice el .prop() método.

    $("#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);
        }
      });
    });
    • +1, pero he encontrado que se puede utilizar removeProp para la movilidad de la propiedad. El jQuery docs decir el uso de prop("disabled", false); lugar. api.jquery.com/prop/#prop-propertyName-value
    • es fara mejor manera de utilizar la proposición(). Tuve algunos problemas en el uso de attr() en las casillas de verificación. Por primera vez, aceptar segundo tiempo no hubo respuesta. A fin de utilizar de la proposición(). +1 de mí
  4. 11

    No estoy seguro de por qué algunas de estas soluciones de uso .cada uno (de) – no es necesario.

    Aquí un poco de trabajo código que desactiva si la 3ª casilla de verificación que se hace clic, de lo contrario se elimina el atributo disabled.

    Nota: he añadido un id a la casilla de verificación. También, recuerde que los identificadores deben ser únicos en el documento, para quitar los identificadores de los componentes radiobutton, o que los hacen únicos

    $("input:radio[name='userradiobtn']").click(function() {
        var isDisabled = $(this).is(":checked") && $(this).val() == "3";
        $("#chkbox").attr("disabled", isDisabled);
        $("#usertxtbox").attr("disabled", isDisabled);
    });
    • se utilizó porque queremos conseguir el 3er botón de radio. Podemos utilizar $("input[type=radio]:eq(2)") demasiado. Su método de identificar el botón de la radio, por su valor, que por supuesto es válido también. 🙂
    • si el usuario seleccione la casilla de verificación y escriba algún texto en el cuadro de texto y, a continuación, si se selecciona el botón de radio de la casilla seleccionada debe estar desactivada y el cuadro de texto que va a ser limpiado?¿Cómo puedo hacer esto…pido a estas preguntas, porque yo soy anewbie…Gracias de antemano..
    • con ese requisito en mente que probablemente no se habría configurado el js como el anterior, pero en este caso, basta con comprobar es el elemento está deshabilitado y llame a $(«#usertxtbox»).val(«») en la que me hubiera
  5. 8

    Sé que no es un buen hábito para responder a una pregunta vieja, pero me voy a poner esta respuesta para la gente que iba a ver la pregunta después.

    La mejor manera de cambiar el estado en JQuery ahora es a través de

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

    Por favor consulte este enlace para la plena ilustración.
    Habilitar/deshabilitar una entrada con jQuery?

    • Por Jquery web oficial, en la proposición es el camino a seguir. +1
  6. 2

    Que yo he hecho es ligeramente 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" />   

    Aviso atributo de clase

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

    De esta manera si necesita agregar más botones de radio que usted no necesita preocuparse acerca de cómo cambiar el javascript

  7. 0

    Supongo que usted probablemente desea enlazar un evento «click» a un número de botones de la radio, leer el valor del clic radiobutton y dependiendo del valor, activar/desactivar una casilla de verificación y /o cuadro 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
            }
        });
    });
    • No he hecho este trabajo con el cable de HTML, pero eso es bastante fácil, en mi humilde opinión.
  8. 0

    Lo siento por ser tan tarde a la fiesta, pero veo un poco de espacio para mejorar en este sentido. No referida a «deshabilitar el cuadro de texto», pero a la radionbox la selección y el código de la simplificación, haciéndolo un poco más a prueba de futuro, para cambios posteriores.

    Primero de todos, usted no debería usar .cada uno de los() y utilizar el índice para señalar un determinado botón de radio. Si usted trabaja con un conjunto dinámico de los botones de la radio o si agregar o quitar algunos de los botones de la radio después, a continuación, el código va a reaccionar en el botón equivocado!

    Siguiente, pero que no era probablemente el caso cuando el OP se hizo, yo prefiero usar .on(‘click’, function(){…}) en lugar de hacer clic…
    http://api.jquery.com/on/

    Lst, pero no menos importante, también en el código podría ser más simple y a prueba de futuro seleccionando el botón de radio basado en su nombre (pero que apareció ya en un post).

    Así que terminé con el siguiente código.

    HTML (basado en el código de 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-código

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

    MVC 4 @Html.CheckBoxFor generalmente la gente quiere a la acción de activar y desactivar de mvc casilla de verificación.

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

    puede definir identificación de los controles que desea cambiar y en javascript, haga los siguientes

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

    también puede cambiar la propiedad como

    $("#txtEmpId").prop("disabled", true); 
    $("#txtEmpId").prop("readonly", true); 
  10. 0
    $(document).ready(function () {
       $("#txt1").attr("onfocus", "blur()");
    });

    JS:

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

    HTML:

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

  11. 0

    obtener los botones de radio de valor y partidos con cada uno, si es 3 entonces movilidad checkbox and textbox.

    JS:

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

    HTML:

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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea