How can i disable a input field with a dynamic select?

Question

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.

Break your problem down into two pieces: 1) how to trigger an event when a select option is selected and 2) how to disable an input. There are TONS of questions that cover both of those topics here in SO. Do some research and work towards resolving this problem yourself, and then come back and edit your question and add in your code segment that demonstrates your best attempt at resolving this, and explain at what point(s) in your code you aren't getting the results you expect. — devlin carnate, Oct 20 '21 at 15:27
I edited i could catch the value of my select in my function but i cant make the value of the disabled property change depending on my option. @devlincarnate — matuco1998, Oct 20 '21 at 15:45
[How to change disabled attribute of input](https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button/13831737) (Notice the spelling of `disabled` versus your code, which uses `disable') — devlin carnate, Oct 20 '21 at 17:39

SKJ · Answer 1 · 2021-10-20T15:38:36.530

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>

score 0 · Answer 2 · answered Oct 20 '21 at 15:45

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
    }
}

score 0 · Answer 3 · answered Oct 20 '21 at 16:04

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>

How can i disable a input field with a dynamic select?

3 Answers3