Disable a combo when detecting that a text type input has data

Question

Disable a combo when detecting that a text type input has data

Navigation

#1 by (1 votes)
#2 by (-2 votes)

1

Good Day.

I want to disable a combo when a character is detected in the field and vice versa, when I put an option in the combo it disables the imput. Here my code. Putting the onkeyup event and removing the readonly if I disable the combo, but that field I have readonly because it will be filled with a string of a result of a search. I can not find a way to disable that combo fulfilling the conditions previously exposed.

<!DOCTYPE html>
<html>
<body>

<input type="text" name="txtnumsoldes" id="txtnumsoldes" size="30" onkeyup="vacio()" readonly="" />

<select name='cmbcodtipsol' id='cmbcodtipsol'  style=width:350px>";
<option value='-' >---seleccione--- </option>";

<script>
function vacio()
{
    f=document.formulario;
    if (f.txtnumsoldes.value=="")
    {   
        document.getElementById('cmbcodtipsol').disabled=false; 
    }
   else 
    {
        document.getElementById('cmbcodtipsol').disabled=true;
    }
}


</script>

</body>
</html>

javascript html5 html

asked by Rafael Aguilar 23.01.2018 в 14:47

source

2 answers

Google Places: Error: statuscode = places_api_key_invalid resolution = null SQL SERVER. Boolean field of an alphabetically ordered list

score 1 · Answer 1

I think I understand what you're looking for, try this logic, every time you use the textbox or the combobox, its action de-activates the other control; In turn, when there is nothing in the textbox or the combobox has the default option, enable the other control again.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  </head>
  <body>
    <input type="text" id="input" name="">
    <select class="" id="select" name="">
        <option value="0" id="0">Select</option>
        <option value="1" id="1">1</option>
        <option value="2" id="2">2</option>
        <option value="3" id="3">3</option>
    </select>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#input").on("keyup", function() {
                if ($("#input").val() == "") {
                    $("#select").prop("disabled", false);
                } else {
                    $("#select").prop("disabled", true );
                }
            });
            $("#select").on("change", function() {
                if (parseInt($("#select").val()) === 0) {
                    $("#input").prop("disabled", false);
                } else {
                    $("#input").prop("disabled", true);
                }
            });
        });
    </script>
  </body>
</html>

score -2 · Answer 2

In the end to shoot an event in js I noticed link , a reference found in link in a comment by Kieren Dixon, I have to stop using jquery to go to the bathroom

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        </head>
        <body>
            <form>
                <input type="text" name="txtnumsoldes" id="txtnumsoldes" size="30" onkeyup="checkinput()" value=""/>

                <!-- 
                hipotetica opcion seleccionada desde el server para probar
                <input type="text" name="txtnumsoldes" id="txtnumsoldes" size="30" onkeyup="checkinput()" value="hell'o world"/>

                -->
                <select name="mbcodtipsol" id="cmbcodtipsol" style="width:350px" onchange="checkselect()"/>
                <option value="-"> ---seleccione--- </option>
                <option value="1"> Opción1 </option>

                <!-- 
                    hipotetica opcion seleccionada desde el server para probar
                    <option value="1" selected> Opción1 </option>

                -->

                <option value="2"> Opción2 </option>
            </select>
        </form>
        <script>
            function triggerEvent(el, type) {
                if ('createEvent' in document) {
                    // modern browsers, IE9+
                    var e = document.createEvent('HTMLEvents');
                    e.initEvent(type, false, true);
                    el.dispatchEvent(e);
                } else {
                    // IE 8
                    var e = document.createEventObject();
                    e.eventType = type;
                    el.fireEvent('on' + e.eventType, e);
                }
            }

            var f = document.forms[0];

            function checkinput() {
                if (f.txtnumsoldes.value == "") {
                    document.getElementById('cmbcodtipsol').disabled = false;
                } else {
                    document.getElementById('cmbcodtipsol').disabled = true;
                }
            }

            function checkselect() {
                if (f.cmbcodtipsol.selectedIndex == 0) {
                    document.getElementById('txtnumsoldes').disabled = false;
                } else {
                    document.getElementById('txtnumsoldes').disabled = true;
                }
            }

            document.addEventListener("DOMContentLoaded", function (event) {
                //disparar el evento cuando llegen datos desde el servidor a el input
                var el = document.querySelector('input[type="text"]');
                triggerEvent(el, 'keyup');

                //disparar el evento cuando llegen datos desde el servidor a el select
                var el = document.querySelector('#cmbcodtipsol');
                triggerEvent(el, 'change');
            });
        </script>

    </body>
    </html>