Prevent a select from opening while being readonly

Question

Prevent a select from opening while being readonly

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Greetings, I have a select which is disabled with the attribute readonly , what I want is to prevent it from opening while it is with readonly , this achievement in this code if ($(this).is('[readonly]')) { $(this).blur() }
but this opens and closes the select , this is what I want to avoid. Any idea of how it could be?
EDITO
This element must be enabled when double clicking on this, so I do not use disabled, this is already done.
pd : I use botstrap and when I'm with readonly I take a disabled style

$(document).ready(documentoListo)
function documentoListo() {
	$("body").on("click",".drop",function(e){
		if ($(this).is('[readonly]')) {
                       //e.preventDefault()
			$(this).blur()
		}
	})
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="escolaridad" class="form-control reset inputt drop" readonly="readonly"><option value="0">Seleccione escolaridad</option><option value="1">Básica incompleta</option><option value="2">Básica completa</option><option value="3">Educación Media incompleta</option><option value="4">Educación Media completa</option><option value="5">Técnico nivel medio</option><option value="6">Técnico nivel superior</option><option value="7">Técnico profesional universitario</option><option value="8">Profesional universitario</option></select>

jquery html

asked by Kevin 20.11.2017 в 21:24

source

2 answers

0

For the <select> tag the readonly attribute does not exist, this can be verified in the w3schools documentation , then you must change the attribute by disabled

<select id="escolaridad" class="form-control reset inputt drop" disabled="disabled">
  <option value="0">Seleccione escolaridad</option>
  <option value="1">Básica incompleta</option>
  <option value="2">Básica completa</option>
  <option value="3">Educación Media incompleta</option>
  <option value="4">Educación Media completa</option>
  <option value="5">Técnico nivel medio</option>
  <option value="6">Técnico nivel superior</option>
  <option value="7">Técnico profesional universitario</option>         <option value="8">Profesional universitario</option>
</select>

answered by 20.11.2017 в 21:31

Systems of differential equations in Python Collect xml data in php

score 1 · Accepted Answer

Well, since you can NOT use listeners in DEACTIVATED elements, because I get the first X coordinates where the select starts and where it ends (maxX) and the same with the Y coordinates.

With this if you click between the range of the minimum value of x and between its maximum value and at the same time with the y, it will add +1 to flags which controls the number of clicks. Also the trick is in user in the css, pointer-events: none; that allows me to hear the event "click" inside the deactivated element (in this case the select), but inheriting it to the body.

window.addEventListener("DOMContentLoaded", main);

function main(){
    document.addEventListener("click",enable);
}
var flag = 0; 
  function enable(e) {
  var element = document.getElementById("Escolaridad"),
    posX = element.getBoundingClientRect().left,
    posY = element.getBoundingClientRect().top,
    maxX = posX + element.offsetWidth,
    maxY = posY + element.offsetHeight;
  var mouse = {x: e.clientX, y: e.clientY}; 
  if( (mouse.x >= posX && mouse.x <= maxX)  &&
     (mouse.y >= posY && mouse.y <= maxY)
   ) { 
   if(flag === 1) {
     element.removeAttribute("disabled")
     document.body.setAttribute("style","pointer-events: initial")
     document.removeEventListener("click",enable);
   } 
   flag++; 
   }
  }

body {
  pointer-events: none;
}
#Escolaridad {
position:relative;
border: 2px solid purple;
left: 150px;
top: 50px;
}

<select disabled id="Escolaridad">
<option>Media</option>
<option>Básica</option>
<option>Kinder</option>
</select>