How to disable a lookup button on client side?

[onoboa]

Hi everybody,

I have a validation in a selection field Client side, when the user select an record from the list, in the form another field with lookup button must be disabled.
the text field is disbled but the lookup button have still working.

How can i do for disbled the lookup button

this is my code

$(document).ready(function(){

   $("#x_cita").change(function() {
		console.log("Entró en Valdación de Cita");
		if ($("#x_cita").val() > 0){
			console.log("make readonly or disabled");
			//$('#sv_x_institucion').prop('readonly', true);
			$('#sv_x_institucion').prop('disabled', true);			
		}else{
			console.log("make enabled");
			$('#sv_x_institucion').prop('readonly', false);
			$('#r_fecha').focus();
		}
    });	

});

The webpage code for the control is this:

    </tr>
    <tr id="r_institucion">
        <td class="w-col-2"><span id="elh_consulta_institucion">Unidad Médica<i data-phrase="FieldRequiredIndicator" class="fas fa-asterisk ew-required" data-caption=""></i></span></td>
        <td >
<span id="el_consulta_institucion">
<span id="as_x_institucion" class="ew-auto-suggest">
    <div class="input-group flex-nowrap">
        <input type="text" class="form-control" name="sv_x_institucion" id="sv_x_institucion" value="" size="30" maxlength="11" placeholder="Unidad Médica" data-placeholder="Unidad Médica" class="form-control" aria-describedby="x_institucion_help">
        <div class="input-group-append">
            <button type="button" title="Buscar - Unidad Médica" onclick="ew.modalLookupShow({lnk:this,el:'x_institucion',m:0,n:10,srch:false});" class="ew-lookup-btn btn btn-default"><i class="fas fa-search ew-icon"></i></button>
        </div>
    </div>
</span>
<input type="hidden" is="selection-list" class="form-control" data-table="consulta" data-field="x_institucion" data-input="sv_x_institucion" data-page="1" data-type="text" data-multiple="0" data-lookup="1" data-value-separator=", " name="x_institucion" id="x_institucion" value="">
<div class="invalid-feedback">Entero incorrecto - Unidad Médica<br>Por favor ingrese el campo requerido - Unidad Médica</div>
<script>
loadjs.ready(["fconsultaadd"], function() {
    fconsultaadd.createAutoSuggest(Object.assign({"id":"x_institucion","forceSelect":true}, ew.vars.tables.consulta.fields.institucion.autoSuggestOptions));
});
</script>
<input type="hidden" id="p_x_institucion" name="p_x_institucion" value="f=EB3P2Yz3DghzNJug0lgzs3ivk4c."></span>
</td>

Thanks,

Omar

[mobhar]

You should use Client side events for such case.

[arbei]

You should add "disabled" attribute to the <button> also.

[onoboa]

Thanks but, how can i do for add the disabled attribute in this line

<button type="button" title="Buscar - Unidad Médica" onclick="ew.modalLookupShow({lnk:this,el:'x_institucion',m:0,n:10,srch:false});" class="ew-lookup-btn btn btn-default"><i class="fas fa-search ew-icon"></i></button>

From phpmaker setup field institucion.

[onoboa]

This code in Field Setup -> Select Tag -> Client side Events works fine with the text box

{ // keys = event types, values = handler functions
    "change": function(e) {
        if (this.value != "") {
            $(this).fields("institucion").disabled(true); // true as disabled, false as normal
        } else {
            $(this).fields("institucion").disabled(false); // true as disabled, false as normal
        }
    }
}

But the button of the Modal Lookup dialog is still enabled.

[mobhar]

To disable the button, you may use:

$(".ew-lookup-btn").prop('disabled', true);