How can I disable or enable a select from another select?

What I would like to do is that when the form is in the option "Choose an option" make the other select are disabled and when selecting a different option example: cardio vascular, activate one of the diagnostic select and do not enable the other 2 select until an option has been chosen and the same thing happens in the other select, I have researched how to do it but only achieve it with inputs and can not make it work with selects...

 <form name="diagnostico_sindromatico" method="post" action="">
<div>
    <select name="campo1" id="campo1">
    <option value="0" selected>Elija una opcion</option>
    <option value="1">Cardio Vascular</option>
    <option value="2">Endocardio no metabolicos</option>
    <option value="3">Enfermedades Infecciosas</option>
    <option value="4">Enfermedades de la piel</option>
    <option value="5">Enfermedades Inf(I.T.S)</option>
    <option value="6">Enf.Respiratorias inf.</option>
    <option value="7">Gastrointestinal</option>
    <option value="8">Ginecologia</option>
    <option value="9">Mordeduras/Ponzoñas</option>
    <option value="10">Neurologia</option>
    <option value="11">OsteoMuscular</option>
    <option value="12">Oftalmologica</option>
    <option value="13">Obstetrica</option>
    <option value="14">Odontologia</option>
    <option value="15">Patologia Sanguinea</option>
    <option value="16">Respiratorias</option>
    <option value="17">Sindrome Viral</option>
    <option value="18">Urologica</option>
    </select>
</div>

<div>
    <select name="diagnostico1" id="diagnostico1">
    <option selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option>
    </select>

    <select name="diagnostico2" id="diagnostico2">
    <option selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option> 
    </select>

    <select name="diagnostico3" id="diagnostico3">
    <option selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option> 
    </select>               
</div>

 5
Author: BlacDrak, 2016-08-22
Source

2 answers

Uses the disabled attribute like this.

$('#campo1').change(function(){
  $('#diagnostico1').removeAttr('disabled');
});

$('#diagnostico1').change(function(){
  $('#diagnostico2').removeAttr('disabled');
});

$('#diagnostico2').change(function(){
  $('#diagnostico3').removeAttr('disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="diagnostico_sindromatico" method="post" action="">
<div>
    <select name="campo1" id="campo1">
    <option value="0" disabled selected>Elija una opcion</option>
    <option value="1">Cardio Vascular</option>
    <option value="2">Endocardio no metabolicos</option>
    <option value="3">Enfermedades Infecciosas</option>
    <option value="4">Enfermedades de la piel</option>
    <option value="5">Enfermedades Inf(I.T.S)</option>
    <option value="6">Enf.Respiratorias inf.</option>
    <option value="7">Gastrointestinal</option>
    <option value="8">Ginecologia</option>
    <option value="9">Mordeduras/Ponzoñas</option>
    <option value="10">Neurologia</option>
    <option value="11">OsteoMuscular</option>
    <option value="12">Oftalmologica</option>
    <option value="13">Obstetrica</option>
    <option value="14">Odontologia</option>
    <option value="15">Patologia Sanguinea</option>
    <option value="16">Respiratorias</option>
    <option value="17">Sindrome Viral</option>
    <option value="18">Urologica</option>
    </select>
</div>

<div>
    <select name="diagnostico1" id="diagnostico1" disabled>
    <option disabled selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option>
    </select>
 
    <select name="diagnostico2" id="diagnostico2" disabled>
    <option disabled selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option> 
    </select>

    <select name="diagnostico3" id="diagnostico3" disabled>
    <option disabled selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option> 
    </select>               
</div>
 1
Author: Jose Hermosilla Rodrigo, 2016-08-22 16:00:59

You could do this using jQuery's change() function and changing the disabled property of the select using prop().

$("#campo1").change(function() {
      if($("#campo1").val() !== "0"){
        $('#diagnostico1').prop('disabled', false);
      }else{
        $('#diagnostico1').prop('disabled', 'disabled');
        $('#diagnostico2').prop('disabled', 'disabled');
        $('#diagnostico3').prop('disabled', 'disabled');
      }
    });
    
    $("#diagnostico1").change(function() {
      if($("#diagnostico1").val() !== "0"){
        $('#diagnostico2').prop('disabled', false);
      }else{
        $('#diagnostico2').prop('disabled', 'disabled');
        $('#diagnostico3').prop('disabled', 'disabled');
      }
    });
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Select</title>
</head>
<body>
<form action="">
  <div>
    <select name="campo1" id="campo1">
    <option value="0" selected>Elija una opcion</option>
    <option value="1">Cardio Vascular</option>
    <option value="2">Endocardio no metabolicos</option>
    <option value="3">Enfermedades Infecciosas</option>
    <option value="4">Enfermedades de la piel</option>
    <option value="5">Enfermedades Inf(I.T.S)</option>
    <option value="6">Enf.Respiratorias inf.</option>
    <option value="7">Gastrointestinal</option>
    <option value="8">Ginecologia</option>
    <option value="9">Mordeduras/Ponzoñas</option>
    <option value="10">Neurologia</option>
    <option value="11">OsteoMuscular</option>
    <option value="12">Oftalmologica</option>
    <option value="13">Obstetrica</option>
    <option value="14">Odontologia</option>
    <option value="15">Patologia Sanguinea</option>
    <option value="16">Respiratorias</option>
    <option value="17">Sindrome Viral</option>
    <option value="18">Urologica</option>
    </select>
</div>

<div>
    <select name="diagnostico1" id="diagnostico1" disabled>
    <option value ="0" selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option>
    </select>

    <select name="diagnostico2" id="diagnostico2" disabled>
    <option  value ="0" selected>Elija una Opcion</option>
    <option value="1">Tumoral</option>
    <option value="2">Enfermedad Infecciosa</option>
    <option value="3">tiroides</option>
    <option value="4">bronquitis</option>
    <option value="5">diabetes</option> 
    </select>

</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
 3
Author: Juan Pinzón, 2016-08-22 16:02:57