Disable a list group

Question

Disable a list group

Navigation

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

1

I have a list group like in the image

I want to disable it when I touch the "Edit" button using the following code, but when I do it the buttons are still "clickable", how can I disable it correctly? Thanks

Code to disable list group

$(document).on('click', '.editRuta', function () {
    $(".list_of_items").prop("disabled", true);
});

jquery html

asked by Baker1562 18.04.2018 в 02:38

source

2 answers

1

You must add the list_of_items class to your buttons, as shown in the following example:

<input type="button" class="list_of_items " value="Editar">
<input type="button" class="list_of_items " value="Borrar">

Running the jquery script will find those elements that have this class will disable them.

answered by 18.04.2018 в 03:04

Count rows - judgment result in the query Problems generating a table with php from a two-dimensional array

score 1 · Accepted Answer

There is a very simple way that I use to disable and I get it by adding a property in CSS when you are editing it.

$(document).on('click', '.editRuta', function () {
    $(".list_of_items").addClass("desabilitado");
});

And in the CSS, you can add something like:

.deshabilitado{
  pointer-events: none;
  opacity: 0.5;
}

With opacity you make anything look semitransparent (with values from 1 to 0) and with pointer events , you cancel the clic in that element. Now you can add more disabling elements of actions such as:

.deshabilitado{
  position: relative;
}

.deshabilitado::before{
  content: '';
  display: block;
  width: 100%; 
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,.6);
}

With the above you create a pseudo element that covers the entire element and does not allow any interaction on it.

You can combine this alternative with the previous one and you can even add an effect (totally optional) to make it look all gray, like this:

.deshabilitado{
  pointer-events: none;
  opacity: 0.5;
  position: relative;
  filter: grayscale(0);
}

Here is a demo, of the 3 options, so you can see how it looks:

$(".check").click(function () {
    $("ul").toggleClass("deshabilitado");
    $(this).toggleClass("activado");
});

*{box-sizing: border-box; padding: 0; margin: 0;}

body{ font-family: calibri, sans-serif; padding-top: 2.5em;}

h3{
  padding: 1em 1em .5em;
  font-size: 0.6em;
}

label{
  position: fixed;
  z-index: 100;
  top: 1em;
  left: 1em;
  background: pink;
}

.activado{
  background: cyan;
}

ul{
 color: #555;
 font-size: 0.8em;
}

li{
 border: 1px solid lightgray;
 padding: 0.3em 1em;
 display: flex;
 justify-content: space-between;
 align-items: center;
 text-transform: uppercase;
}

span{
  display: inline-block;
  vertical-align: center;
}

button, label{
  border-radius: .5em;
  display: inline-block;
  vertical-align: center;
  padding: 0.3em 1em;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
  box-shadow: 
    inset 0 0 0 1px rgba(100,0,0,.3),
    inset 0 -2px 0 0 rgba(100,0,0,.3);
  border: none;
  color: rgba(0,0,0,.7);
  cursor: pointer;
}

li:first-child button{
  background-color: yellow;
}
li:last-child button{
  background-color: crimson;
}

.deshabilitado{
  transition: all ease .3s;
}

.deshabilitado.tipo1{
  opacity: 0.6;
  pointer-events: none;
}

.deshabilitado.tipo2{
  position: relative;
}

.deshabilitado.tipo2::before{
  content: '';
  position: absolute;
  z-index: 100;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.6)
}

.deshabilitado.tipo3{
  filter: grayscale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<label class="check">deshabilitar</label>
<h3>Normal</h3>
<ul>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>
<h3>Disabilitado Ej: 1</h3>
<ul class="tipo1">
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>
<h3>Disabilitado Ej: 2 con seudoelemento</h3>
<ul class="tipo2">
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>
<h3>Disabilitado Ej: 3 combinado</h3>
<ul class="tipo1 tipo2 tipo3">
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>

Was it what you were looking for? Do not hesitate to write me in case you have another question.

Updated

Updated example to use two buttons, instead of one:

On a button, you add the class:

$("ul").addClass("deshabilitado");

And in the other, you remove it:

$("ul").removeClass("deshabilitado");

Look at this example:

$(".deshabilita").click(function () {
    $("ul").addClass("deshabilitado");
});

$(".habilita").click(function () {
    $("ul").removeClass("deshabilitado");
});

*{box-sizing: border-box; padding: 0; margin: 0;}

body{ font-family: calibri, sans-serif; padding-top: 2.5em;}

h3{
  padding: 1em 1em .5em;
  font-size: 0.6em;
}

div{
  position: fixed;
  z-index: 100;
  top: 1em;
  left: 1em;
}

label{  outline-color: transparent; }
label:focus{ background: cyan; }

.habilita{
  background: whitesmoke;
}

.deshabilita{
  background: pink;
}

ul{
 color: #555;
 font-size: 0.8em;
}

li{
 border: 1px solid lightgray;
 padding: 0.3em 1em;
 display: flex;
 justify-content: space-between;
 align-items: center;
 text-transform: uppercase;
}

span{
  display: inline-block;
  vertical-align: center;
}

button, label{
  border-radius: .5em;
  display: inline-block;
  vertical-align: center;
  padding: 0.3em 1em;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
  box-shadow: 
    inset 0 0 0 1px rgba(100,0,0,.3),
    inset 0 -2px 0 0 rgba(100,0,0,.3);
  border: none;
  color: rgba(0,0,0,.7);
  cursor: pointer;
}

li:first-child button{
  background-color: yellow;
}
li:last-child button{
  background-color: crimson;
}

.deshabilitado{
  transition: all ease .3s;
}

.deshabilitado.tipo1{
  opacity: 0.6;
  pointer-events: none;
}

.deshabilitado.tipo2{
  position: relative;
}

.deshabilitado.tipo2::before{
  content: '';
  position: absolute;
  z-index: 100;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.6)
}

.deshabilitado.tipo3{
  filter: grayscale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div>
  <label tabindex="1" class="habilita">habilitar</label>
  <label tabindex="2" class="deshabilita">deshabilitar</label>
</div>
<h3>Normal</h3>
<ul>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>
<h3>Disabilitado Ej: 1</h3>
<ul class="tipo1">
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>
<h3>Disabilitado Ej: 2 con seudoelemento</h3>
<ul class="tipo2">
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>
<h3>Disabilitado Ej: 3 combinado</h3>
<ul class="tipo1 tipo2 tipo3">
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
  <li>
  <span>Texto ejemplo</span> <button>Boton</button>
  </li>
</ul>