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

Navigation
5

What I would like to do is that when the form is in option "Choose an option" make the other select disabled and that when selecting a different option example: cardio vascular, activate one of the select diagnosis and not enable the other 2 select until you have chosen an option and that it happens the same in the other select, I researched how to do it but only achieved 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>

    
asked by BlacDrak 22.08.2016 в 17:33
source

2 answers

1

Use the disabled attribute in this way. 

$('#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>
    
answered by 22.08.2016 / 18:00
source
1

You could do it using the change () function of jquery 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>
    
answered by 22.08.2016 в 18:02
Problems with bluetooth android studio connection Neural network with backward propagation returns the same outputs for large vectors