How to disable a boostrap dropdown menu?

Navigation
2

I have the following method in the start controller that directs me to the menu screen 

@RequestMapping(value= "/menu", method= RequestMethod.GET)
public String mostrarMenu(){
  return "/menu";
}

this is the jsp of the menu 

<li>
	<a href="${pageContext.request.contextPath}/vista/MenuInicial"> MENU INICIAL
</li>

<li class="active">
	<a class="dropdown-toggle" href="#"> OPCIONES
		<span class="caret"></span>
	</a>
	
	<ul class="dropdown-menu">
		<li id="1"><a href="${pageContext.request.contextPath}/vista/Menu1">MENU 1</a></li>
		<li id="2"><a href="${pageContext.request.contextPath}/vista/Menu1">MENU 2</a></li>
		<li id="3"><a href="${pageContext.request.contextPath}/vista/Menu1">MENU 3</a></li>
	</ul>
</li>

What I want to do is that when loading the page, the Initial Menu is active and shows me its form, so it stands out that I am placed in that part and that the OPTIONS menu is disabled, that is, if someone wants to give click you can not access them in any of the drop-down options

In the Initial Menu there is a form and I want it to be filled, when choosing an option of a select this triggers an event and allows you to select some option from the OPTIONS drop-down menu

How can I do that?

I have this other method in another controller that triggers the form of the menu "INITIAL MENU" 

@RequestMapping(value= "/menuInicial", method= RequestMethod.GET)
public String mostrarMenuInicial(){
  return "/menuInicial";
}

and its jsp with the selects, that when filling the last this launch an event to enable the OPTIONS menu pull-down 

<div class="form-group row">
                <label class="col-sm-2" for="Combo1">Combo 1</label>
                <div class="col-sm-4">
                    <select class="form-control" id="combo1">
                        <option>1</option>
                        <option>2</option>
                    </select>
                </div>

                <label class="col-sm-2" for="Combo2">Combo 2</label>
                <div class="col-sm-4">
                    <select class="form-control" id="combo2">
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>

 </div>

I hope you can help me, thanks

    
asked by Root93 04.09.2018 в 06:36
source

1 answer

1

I do not know if this could help you, but you could use class='disabled' bootstrap to disable the options if I did not understand wrong, you have to control if the select are full to reactivate the options menu there, use an if fixing the lenght example:
edited code 

//HTML
 <option disabled> opción <option>
//JQUERY
if ($('#mySelectList > option').length == 2) {
    $('#menuOpciones').removeClass('disabled');
    $('#menuOpciones').prop("disabled", false); //para reabilitar
}

this new piece helps you to change an attribute, in this case we have the disabled that is active, it is true, when we finish filling the list we tell it to activate the options putting the disabled in false

in case here you can find an example of the class in action

I hope it serves you

    
answered by 04.09.2018 в 08:40
How to Perform an Automatic BackUp in MySQL Revert output from print_r to its original PHP array