I want to create a dynamic select element where if I choose a certain option and a specific text input field is disabled.

Here is my HTML:

<div class="form-group col-md-2">
    <label for="">Tipo de Compra</label>
    <select name="" class="form-control" id="tipoCompra" required>
        <option value="">Tipo de compra </option>
        <option value="Nacional">Nacional</option>
        <option value="Exterior">Exterior</option>
    </select>
</div>

If the user selects the option "Nacional" I want to make the following input field disabled so they can't enter any value.

<div class="form-group col-md-2">
    <label for="fob">Costo Fob</label>
    <input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>

I'm using JavaScript for my functions and some Jquery, but I don't know how to create a function for this.

This is my function:

function TipoCompra(){

    var tipoCompra = document.getElementById('tipoCompra').value;

    console.log(tipoCompra);

    var fob = document.getElementById('fob');

    if (tipoCompra == 'Nacional'){
        fob.disable = true;
    } else {
        fob.disable = false;
    }



}

But i dont know how to change the disabled property.

CodePudding user response：

You need to check change of your select with change function of jQuery

https://api.jquery.com/change/

And check the value of your select.

Then use prop function to disabled your element.

https://api.jquery.com/prop/

$('#fob').prop('disabled', true);

$("select[name='test']").change(function() {
  let selectVal = $(this).val();

  if (selectVal == 'Nacional') {
    $('#fob').prop('disabled', false);
  } else {
    $('#fob').prop('disabled', true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
                        <label for="">Tipo de Compra</label>
                        <select name="test" class="form-control" required>
                        <option value="">Tipo de compra </option>
                        <option value="Nacional">Nacional</option>
                        <option value="Exterior">Exterior</option>
                        
                        
                        </select>
                    </div>

<div class="form-group col-md-2 costo">
                    <label for="fob">Costo Fob</label>
                    <input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
                </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

HTML

  <div class="form-group col-md-2">
                            <label for="">Tipo de Compra</label>
                            <select name="" id="myList"class="form-control" required onchange="disable()">
                            <option value="">Tipo de compra </option>
                            <option value="Nacional">Nacional</option>
                            <option value="Exterior">Exterior</option>
                            
                            
                            </select>
                        </div>
                    
                    <div class="form-group col-md-2">
                    <label for="fob">Costo Fob</label>
                    <input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
                </div>

JS

function disable(){
    if(document.getElementById('myList').value == 'Nacional'){
        document.getElementById('fob').disabled = true
    }
    else{
        document.getElementById('fob').disabled = false
    }
}

CodePudding user response：

Based on your update with your JavaScript there's a few changes you need to make:

Assuming you want to inline the JavaScript function for onchange like your other functions

This should include onChange="TipoCompra()":

//<select name="" class="form-control" id="tipoCompra" required>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>

This should be disabled:

//fob.disable = true;
fob.disabled = true;

disabled="false" is invalid in your input:

//<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>

http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

Functional example. Note: I removed the calls to the Todas(); function since it wasn't included with your question.

function TipoCompra(){
    var tipoCompra = document.getElementById('tipoCompra').value;

    console.log(tipoCompra);

    var fob = document.getElementById('fob');
    if (tipoCompra == 'Nacional'){
        fob.disabled = true;
    } else {
        fob.disabled = false;
    }
}

<div class="form-group col-md-2">
    <label for="">Tipo de Compra</label>
    <select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>
        <option value="">Tipo de compra </option>
        <option value="Nacional">Nacional</option>
        <option value="Exterior">Exterior</option>
    </select>
</div>

<div class="form-group col-md-2">
    <label for="fob">Costo Fob</label>
    <input type="number" step="00.01" id="fob" name="fob" class="form-control" required>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>