Enable INPUTS of a SELECT with Js or jQuery [duplicated]

1

I have a select , and depending on the value of select in my case the value="2" I want to enable two input and if it is not in value="2" disable them

<div class="row">  
    <div class="col-md-3">
        <label>Estatus</label>
        <div class="form-group">
            <select name="txtEstatusPedido" id="txtEstatusPedido" class="chosen-select input-md">
                <option <? if ($estatusPedido == 1) echo 'selected'; ?> value="1">Activo</option>
                <option <? if ($estatusPedido == 0) echo 'selected'; ?> value="0">Finalizada</option>
                <option <? if ($estatusPedido == 2) echo 'selected'; ?> value="2">Cancelada</option>
            </select>
        </div>
    </div>  
    <div class="col-md-2">
        <div class="form-group">
            <label>Folio Cancela</label>
            <input type="text" name="txtFolioCancela" id="txtFolioCancela" placeholder="Folio Cancela" value="<?php echo $folioCancela; ?>" data-toggle="masked" data-inputmask="'mask': '9999999'" class="form-control">
        </div>
    </div>                                             
    <div class="col-md-2">
        <label>Fecha Cancela</label>
        <div data-pick-time="false" class="datetimepicker input-group date mb-lg">
            <input type="text" name="txtFechaCancela" id="txtFechaCancela" placeholder="Fecha Cancela" value="<?php echo $fechaCancela; ?>" class="form-control">
        <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
        </span>
    </div>
</div>
    
asked by Tony Muñoz 26.08.2016 в 17:18
source

2 answers

1

You can do it in the following way with jQuery version 1.6 or more :

var $select = $('#txtEstatusPedido');
var $input1 = $('#txtFolioCancela');
var $input2 = $('#txtFechaCancela'); 

$select.on('change', function(){
   if($select.val() === 2){
     $input1.prop("disabled",true);
     $input2.prop("disabled",true);
   }else{
     $input2.prop("disabled",true);
     $input2.prop("disabled",true);
   }
});

or with version jQuery 1.5 and less

var $select = $('#txtEstatusPedido');
var $input1 = $('#txtFolioCancela');
var $input2 = $('#txtFechaCancela'); 

$select.on('change', function(){
   if($select.val() === 2){
     $input1.attr('disabled','disabled');
     $input2.attr('disabled','disabled');
   }else{
     $input2.removeAttr('disabled');
     $input2.removeAttr('disabled');
   }
});
    
answered by 26.08.2016 / 17:52
source
0

Evaluate in the onchange function if the conficion is fulfilled to enable the input you need:

$('#select-input').on('change', function(){
    If(condicion==true)
    {
      $("#input1").prop("disabled",true);
    }
   Else
   {
      $("#input1").prop("disabled",false);
   }
});

Greetings,

    
answered by 26.08.2016 в 17:26