Cum să faci conținut inactiv în interiorul unui div? (Programare, Css, Aspect, Html)

ilnur777 a intrebat.

Cum să faci conținut în niște div bloc inactiv folosind JavaScript?

Să spunem că există un buton cu comanda „Enable / Disable”. Și există un bloc div cu un anumit text. Când apăsați butonul „Enable / Disable”, este „Enable”, puteți lucra cu conținutul din interior, dar când este „Disable”, nu puteți lucra cu conținutul din interiorul blocului div.

Îmi imaginez că, pentru a face conținutul inactiv în interiorul blocului div, trebuie să punem un alt strat care să împiedice editarea conținutului în blocul div de conținut.

Sunt confuz cum să realizez acest tip de funcție.

Comentarii

  • Definiți „lucrul cu conținutul din interiorul”. Vă referiți la editare/contenit? –  > Por Diodeus – James MacFarlane.
  • poate adăugați o căsuță de text la div atunci când o activează și setați valoarea acesteia la div html. apoi, când este dezactivată, doar eliminați căsuța de text și setați div html la valoarea căsuței de text –  > Por Nathan Hayfield.
5 răspunsuri
Evan Mulawski

Fără a utiliza o suprapunere, puteți utiliza pointer-events: none pe div în CSS, dar acest lucru nu funcționează în IE sau Opera.

div.disabled
{
  pointer-events: none;

  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Referință

Pramod H G
div[disabled]
{
  pointer-events: none;
  opacity: 0.7;
}

Codul de mai sus face ca conținutul div-ului să fie dezactivat.Puteți face div-ul dezactivat prin adăugarea atributului disabled.

<div disabled>
  /* Contents */
</div>

Pitka
div[disabled]
{
  pointer-events: none;
  opacity: 0.6;
  background: rgba(200, 54, 54, 0.5);  
  background-color: yellow;
  filter: alpha(opacity=50);
  zoom: 1;  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
  -moz-opacity: 0.5; 
  -khtml-opacity: 0.5;  
}

monknomo

Folosind jquery ați putea face ceva de genul acesta:

// To disable 
$('#targetDiv').children().attr('disabled', 'disabled');

// To enable
$('#targetDiv').children().attr('enabled', 'enabled');

Iată un exemplu de jsFiddle: http://jsfiddle.net/monknomo/gLukqygq/

Ați putea, de asemenea, să selectați copiii div-ului țintă și să le adăugați o clasă css „disabled” cu proprietăți vizuale diferite ca o chemare.

//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");

//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");

Iată un jsFiddle cu acest exemplu: https://jsfiddle.net/monknomo/g8zt9t3m/

Vayodya Tamari

dacă doriți să ascundeți un întreg div de la vizualizare într-o altă dimensiune a ecranului. Puteți urma codul de mai jos ca exemplu.

div.disabled{
  display: none;
}

Comentarii

  • Întrebarea a fost să dezactivați butonul. Vă rugăm să citiți întrebarea cu atenție –  > Por Deepak A.

Tags:, ,