2012-06-20 47 views
10

Tengo dos botones diferentes en mi página. Quiero que ambos estén habilitados cuando se carga la página, pero cuando un usuario hace clic en uno, me gustaría desactivar el otro botón. Pero si hacen clic en el otro botón, me gustaría que ese botón también se deshabilite mientras habilita el otro botón desactivado. Pude desactivar el botón onclick, pero estoy teniendo problemas para volver a habilitar el otro botón. Aquí están los dos botones que tengo en la página. No están en una forma, solo en la página.Deshabilitar botón al hacer clic, pero habilitar otro botón

<button onclick="down7913.disabled=false" type="submit" class="positive" name="up7913"><img src="check.png" alt=""/></button> 

<button onclick="this.disabled=true" type="submit" class="negative" name="down7913"><img src="cross.png" alt=""/></button> 
+0

Si no tiene problemas con jQuery, puedo darle la solución. – asprin

+2

http://jsfiddle.net/mowglisanu/2jBtV/ – Musa

+0

Gracias Musa ... ¿Podría agregar la suya como respuesta en lugar de un comentario? – austinhollis

Respuesta

22

Comprobar el código, es en su sabor y de trabajo:

<button onclick="document.getElementById('up7913').disabled=true;document.getElementById('down7913').disabled=false;" type="submit" class="positive" name="up7913" id="up7913">First</button> 

<button onclick="this.disabled=true;document.getElementById('up7913').disabled=false;" type="submit" class="negative" name="down7913" id="down7913">Second</button> 
3

Usted debe escribir funciones:

function disablefirstbutton() { 
    document.getElementById("firstbutton").disabled = true; 
    document.getElementById("secondbutton").disabled = false; 
} 

function disablesecondbutton() { 
    document.getElementById("secondbutton").disabled = true; 
    document.getElementById("firstbutton").disabled = false; 
} 

<button id="firstbutton" onclick="disablefirstbutton()"> 
<button id="secondbutton" onclick="disablesecondbutton()"> 
0

Usted podría intentar algo como:

onclick="document.getElementsByClassName('negative')[0].disabled=false" 

Eso es puro javascript y tenga en cuenta los document.getElementsByClassName('negative') devuelve un array de todas las clases. Si solo hay uno, entonces funcionará como lo escribí. De lo contrario, agregaría una identificación y usaría document.getElementById('buttonId').disabled=false.

1

Si no les importa usar jQuery, aquí está!

$(function() { 
    $('button').click(function() { 
     var classname = $(this).attr('class'); 

     if(classname == 'positive') 
     { 
      $('button.positive').attr('disabled', 'disabled'); 
      $('button.negative').attr('disabled', false); 
     } 
     else 
     { 
      $('button.negative').attr('disabled', 'disabled'); 
      $('button.positive').attr('disabled', false); 
     } 
    }); 
}); 
Cuestiones relacionadas