जवाबों:
उपरोक्त कई उत्तर केवल फार्म तत्वों पर काम करते हैं। अपनी सामग्री सहित किसी भी DIV को अक्षम करने का एक सरल तरीका सिर्फ माउस इंटरैक्शन को अक्षम करना है। उदाहरण के लिए:
$("#mydiv").addClass("disabledbutton");सीएसएस
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}चीजों को करने के लिए JQuery जैसे ढांचे का उपयोग करें:
function toggleStatus() {
if ($('#toggleElement').is(':checked')) {
$('#idOfTheDIV :input').attr('disabled', true);
} else {
$('#idOfTheDIV :input').removeAttr('disabled');
}
}अक्षम करें और एक दिव्य ब्लॉक में इनपुट तत्वों को सक्षम करें jQuery का उपयोग करके आपको मदद करनी चाहिए!
JQuery 1.6 के रूप में, आपको अक्षम करने के .propबजाय उपयोग करना चाहिए .attr।
मैं केवल तत्वों को सक्षम और अक्षम करने के लिए इस विस्तार विधि का उल्लेख करना चाहता था । मुझे लगता है कि यह सीधे विशेषताओं को जोड़ने और हटाने की तुलना में बहुत क्लीनर तरीका है।
तो फिर तुम बस करो:
$("div *").disable();यहां उन लोगों के लिए एक त्वरित टिप्पणी है जिन्हें एक div की आवश्यकता नहीं है, लेकिन सिर्फ एक ब्लॉकबेलमेंट है। HTML5 <fieldset disabled="disabled"></fieldset>में अक्षम विशेषता मिली। अक्षम फ़ील्डसेट में प्रत्येक प्रपत्र तत्व अक्षम है।
विकलांग विशेषता के लिए W3C कल्पना का हिस्सा नहीं है DIV तत्वों , केवल के लिए प्रपत्र तत्वों ।
मार्टिन द्वारा सुझाया गया jQuery का दृष्टिकोण एकमात्र मूर्खतापूर्ण तरीका है जिसे आप इसे पूरा करने जा रहे हैं।
आप घटनाओं को निष्क्रिय करने के लिए इस सरल सीएसएस स्टेटमेंट का उपयोग कर सकते हैं
#my-div {
pointer-events:none;
}ब्राउज़रों का परीक्षण: IE 9, क्रोम, फ़ायरफ़ॉक्स और jquery-1.7.1.min.js
$(document).ready(function () {
$('#chkDisableEnableElements').change(function () {
if ($('#chkDisableEnableElements').is(':checked')) {
enableElements($('#divDifferentElements').children());
}
else {
disableElements($('#divDifferentElements').children());
}
});
});
function disableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = true;
disableElements(el[i].children);
}
}
function enableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = false;
enableElements(el[i].children);
}
}जैसा कि आप जानते हैं कि 'अक्षम' विशेषता का उपयोग करके HTML इनपुट नियंत्रणों को निष्क्रिय किया जा सकता है। एक बार इनपुट नियंत्रण के लिए 'अक्षम' विशेषता सेट हो जाने पर, इस तरह के नियंत्रण से जुड़े घटना संचालकों को आमंत्रित नहीं किया जाता है।
आपको HTML तत्वों के लिए उपर्युक्त व्यवहार का अनुकरण करना है जो यदि आप चाहते हैं तो 'अक्षम' विशेषता जैसे div का समर्थन नहीं करते हैं।
यदि आपके पास एक div है, और आप उस div पर क्लिक या एक महत्वपूर्ण घटना का समर्थन करना चाहते हैं, तो आपको दो काम करने होंगे: 1) जब आप div को अक्षम करना चाहते हैं, तो इसकी अक्षम विशेषता को हमेशा की तरह सेट करें (बस इसका पालन करने के लिए) कन्वेंशन) 2) अपने div क्लिक और / या प्रमुख हैंडलर में, जांचें कि डिव पर डिसेबल विशेषता सेट है या नहीं। यदि ऐसा है, तो बस क्लिक या कुंजी ईवेंट की उपेक्षा करें (जैसे कि तुरंत वापस लौटें)। यदि अक्षम विशेषता सेट नहीं है, तो अपने div के क्लिक और / या महत्वपूर्ण ईवेंट लॉजिक करें।
ऊपर दिए गए कदम ब्राउज़र स्वतंत्र भी हैं।
इसे प्राप्त करने का एक तरीका यह है कि डिव के सभी बच्चों को विकलांगों के साथ जोड़ा जाए। आप इसे बहुत आसानी से प्राप्त कर सकते हैं:
$("#myDiv").find("*").prop('disabled', true);$("#myDiv")div पाता है, .find("*")आपको सभी स्तरों में सभी बच्चे नोड मिलते हैं और .prop('disabled', true)प्रत्येक को निष्क्रिय करते हैं।
इस तरह सभी सामग्री अक्षम हो गई हैं और आप उन्हें क्लिक नहीं कर सकते हैं, उन्हें टैब कर सकते हैं, उन्हें स्क्रॉल कर सकते हैं, आदि। इसके अलावा, आपको किसी भी सीएसएस वर्गों को जोड़ने की आवश्यकता नहीं है।
मुझे लगा कि मैं एक-दो नोटों में चिप लगाऊंगा।
यह खोजकर्ताओं के लिए है,
मैंने जो सबसे अच्छा किया वह है,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);जैसा कि टिप्पणियों में उल्लेख किया गया है, आप अभी भी टैब कुंजी का उपयोग करके तत्वों के बीच नेविगेट करके तत्व तक पहुंचने में सक्षम हैं। तो मैं यह सलाह देता हूं:
$("#mydiv")
.css({"pointer-events" : "none" , "opacity" : "0.4"})
.attr("tabindex" , "-1");यदि आप विकलांगों के शब्दार्थ को निम्नानुसार रखना चाहते हैं
<div disabled="disabled"> Your content here </div>आप निम्नलिखित सीएसएस जोड़ सकते हैं
div[disabled=disabled] {
pointer-events: none;
opacity: 0.4;
}यहाँ लाभ यह है कि आप उस div पर कक्षाओं के साथ काम नहीं कर रहे हैं जिसके साथ आप काम करना चाहते हैं
मैं Cletus 'फ़ंक्शन के बेहतर संस्करण का उपयोग करूंगा:
$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
$(this).data('jquery.disabled', this.disabled);
this.disabled = true;
}
});
};
$.fn.enable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
this.disabled = $(this).data('jquery.disabled');
}
});
};जो तत्व की मूल 'अक्षम' संपत्ति को संग्रहीत करता है।
$('#myDiv *').disable();pointer-eventsअकेले सीएसएस संपत्ति बाल तत्वों को स्क्रॉल करने से अक्षम नहीं करती है, और यह IE10 और DIV तत्वों (केवल एसवीजी के लिए) के तहत समर्थित नहीं है।
http://caniuse.com/#feat=pointer-events
सभी ब्राउज़रों पर एक DIV की सामग्री को अक्षम करने के लिए।
जावास्क्रिप्ट:
$("#myDiv")
.addClass("disable")
.click(function () {
return false;
});सीएसएस:
.disable {
opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
overflow: hidden;
}IE10 और इसके अलावा सभी ब्राउज़रों पर एक DIV की सामग्री को अक्षम करने के लिए।
जावास्क्रिप्ट:
$("#myDiv").addClass("disable");सीएसएस:
.disable {
// Note: pointer-events not supported by IE10 and under
pointer-events: none;
opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
overflow: hidden;
}नीचे मास्किंग डिवाइसेस सक्षम करने के लिए एक अधिक व्यापक समाधान है
यह भी शामिल है hourglassOn और hourglassOff जो अलग से इस्तेमाल किया जा सकता है
// elemOrId - jquery element or element id, defaults to $('<body>')'
// settings.color defaults to 'transparent'
// settings.opacity defaults to 1
// settings.zIndex defaults to 2147483647
// if settings.hourglasss==true change cursor to hourglass over mask
function maskOn(elemOrId, settings) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
maskDiv=$('<div style="position:fixed;display:inline"></div>');
$('body').append(maskDiv);
elem.data('maskDiv', maskDiv);
}
if (typeof settings==='undefined' || settings===null) settings={};
if (typeof settings.color==='undefined' || settings.color===null) settings.color='transparent';
if (typeof settings.opacity==='undefined' || settings.opacity===null) settings.opacity=1;
if (typeof settings.zIndex==='undefined' || settings.zIndex===null) settings.zIndex=2147483647;
if (typeof settings.hourglass==='undefined' || settings.hourglass===null) settings.hourglass=false;
// stretch maskdiv over elem
var offsetParent = elem.offsetParent();
var widthPercents=elem.outerWidth()*100/offsetParent.outerWidth()+'%';
var heightPercents=elem.outerHeight()*100/offsetParent.outerHeight()+'%';
maskDiv.width(widthPercents);
maskDiv.height(heightPercents);
maskDiv.offset($(elem).offset());
// set styles
maskDiv[0].style.backgroundColor = settings.color;
maskDiv[0].style.opacity = settings.opacity;
maskDiv[0].style.zIndex = settings.zIndex;
if (settings.hourglass) hourglassOn(maskDiv);
return maskDiv;
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function maskOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
console.log('maskOff no mask !');
return;
}
elem.removeData('maskDiv');
maskDiv.remove();
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
// if decendents is true also shows hourglass over decendents of elemOrId, defaults to true
function hourglassOn(elemOrId, decendents) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
if (typeof decendents==='undefined' || decendents===null) decendents=true;
if ($('style:contains("hourGlass")').length < 1) $('<style>').text('.hourGlass { cursor: wait !important; }').appendTo('head');
if ($('style:contains("hourGlassWithDecendents")').length < 1) $('<style>').text('.hourGlassWithDecendents, .hourGlassWithDecendents * { cursor: wait !important; }').appendTo('head');
elem.addClass(decendents ? 'hourGlassWithDecendents' : 'hourGlass');
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function hourglassOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
elem.removeClass('hourGlass');
elem.removeClass('hourGlassWithDecendents');
}
function elemFromParam(elemOrId) {
var elem;
if (typeof elemOrId==='undefined' || elemOrId===null)
elem=$('body');
else if (typeof elemOrId === 'string' || elemOrId instanceof String)
elem=$('#'+elemOrId);
else
elem=$(elemOrId);
if (!elem || elem.length===0) {
console.log('elemFromParam no element !');
return null;
}
return elem;
}इसके साथ आप उदाहरण के लिए कर सकते हैं:
maskOn(); // transparent page mask
maskOn(null, {color:'gray', opacity:0.8}); // gray page mask with opacity
maskOff(); // remove page mask
maskOn(div); // transparent div mask
maskOn(divId, {color:'gray', hourglass:true}); // gray div mask with hourglass
maskOff(div); // remove div maskjsfiddle देखें
function disableItems(divSelector){
var disableInputs = $(divSelector).find(":input").not("[disabled]");
disableInputs.attr("data-reenable", true);
disableInputs.attr("disabled", true);
}
function reEnableItems(divSelector){
var reenableInputs = $(divSelector).find("[data-reenable]");
reenableInputs.removeAttr("disabled");
reenableInputs.removeAttr("data-reenable");
}या बस सीएसएस और एक "अक्षम" वर्ग का उपयोग करें।
नोट: अक्षम विशेषता का उपयोग न करें।
JQuery के साथ / बंद पर गड़बड़ करने की कोई जरूरत नहीं है।
यह बहुत आसान है और क्रॉस ब्राउज़र काम करता है:
.disabled{
position: relative;
}
.disabled:after{
content: "";
position: absolute;
width: 100%;
height: inherit;
background-color: rgba(0,0,0,0.1);
top: 0;
left: 0;
right: 0;
bottom: 0;
}तब आप इसे बंद कर सकते हैं और अपने पेज को इनिशियलाइज़ कर सकते हैं या एक बटन टॉगल कर सकते हैं
if(myDiv !== "can be edited"){
$('div').removeClass('disabled');
} else{
$('div').addClass('disabled');
}JQuery में एक और तरीका, आंतरिक ऊंचाई, आंतरिक चौड़ाई और युक्त DIV की स्थिति को प्राप्त करने के लिए होगा, और बस उसी आकार में एक और DIV, पारदर्शी उपरिशायी है। यह केवल इनपुट के बजाय उस कंटेनर के अंदर सभी तत्वों पर काम करेगा।
हालाँकि याद रखें, JS विकलांग के साथ, आप अभी भी DIVs इनपुट / सामग्री का उपयोग कर पाएंगे। उपरोक्त उत्तरों के साथ भी यही बात है।
यह css केवल / noscript समाधान एक फ़ील्ड के ऊपर एक उपरिशायी (या एक div या किसी अन्य तत्व) को जोड़ता है, सहभागिता को रोकता है:
fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }यदि आप एक अदृश्य यानी पारदर्शी ओवरले चाहते हैं, तो पृष्ठभूमि को उदाहरण के लिए rgba (128,128,128,0) पर सेट करें, क्योंकि यह पृष्ठभूमि के बिना काम नहीं करेगा। उपरोक्त IE9 + के लिए काम करता है। निम्नलिखित बहुत सरल सीएसएस IE11 + पर काम करेगा
[disabled] { pointer-events: none; }क्रोम
यदि आप बस क्लिक करने वाले लोगों को रोकने की कोशिश कर रहे हैं और सुरक्षा के बारे में भयावह रूप से चिंतित नहीं हैं - मैंने 99999 के z- इंडेक्स के साथ एक निरपेक्ष रखा div पाया है। आप किसी भी सामग्री को क्लिक या एक्सेस नहीं कर सकते हैं क्योंकि div को उसके ऊपर रखा गया है। थोड़ा सरल हो सकता है और एक सीएसएस केवल समाधान है जब तक आपको इसे हटाने की आवश्यकता नहीं होती है।
वहाँ विन्यास जावास्क्रिप्ट पुस्तकालयों कि एक HTML स्ट्रिंग या डोम तत्व में ले रहे हैं और अवांछित टैग और विशेषताएँ बाहर पट्टी। इन्हें html sanitizers के रूप में जाना जाता है । उदाहरण के लिए:
जैसे DOMPurify में
DOMPurify.sanitize('<div>abc<iframe//src=jAva	script:alert(3)>def</div>');
// becomes <div>abcdef</div>संपादित करें: नीचे मैंने .on()विधि का उपयोग किया है, इसके बजाय .bind()विधि का उपयोग करें
$(this).bind('click', false);
$(this).bind('contextmenu', false);अपनी सेटिंग हटाने के लिए, आप .unbind()विधि का उपयोग कर सकते हैं । जबकि .off()विधि अपेक्षा के अनुरूप काम नहीं करती है।
$(this).unbind('click', false);
$(this).unbind('contextmenu', false);सैकड़ों समाधानों पर शोध करने के बाद! सूचक-घटनाओं के बारे में सीखना, नीचे मैंने क्या किया है।
जैसा कि @Kokodoko ने अपने समाधान में उल्लेख किया है जो IE को छोड़कर सभी ब्राउज़रों के लिए उपयुक्त है। IE11pointer-events में काम करते हैं और निचले संस्करणों में नहीं। मैंने IE11 में भी देखा , पॉइंटर-ईवेंट बाल तत्वों पर काम नहीं करते हैं। और इसलिए अगर हमारे पास नीचे जैसा कुछ है
<a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>जहां बच्चे के तत्व को फैलाते हैं , pointer-events: noneअभ्यस्त काम की स्थापना करते हैं
इस समस्या को दूर करने के लिए मैंने एक फ़ंक्शन लिखा, जो IE के लिए पॉइंटर-ईवेंट के रूप में कार्य कर सकता है और निचले संस्करणों में काम करेगा।
जेएस फाइल में
DisablePointerEvents(".DisablePointerEvents");
function DisablePointerEvents(classId) {
$(classId).each(function () {
$(this).on('click', false );
$(this).on('contextmenu', false );
});
}CSS File में
.DisablePointerEvents{
pointer-events: none;
opacity: 0.7;
cursor: default;
}HTML में
<a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>इस pointer-eventsपरिदृश्य में pointer-eventsकाम नहीं करता है और जब बच्चे तत्वों की उपरोक्त स्थिति होती है।
उसी के लिए जेएस फिडल
उपमा समाधान
मेरे चयनकर्ता को देखो
$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);fieldsetUserInfoडिव में वे सभी इनपुट होते हैं जिन्हें मैं अक्षम या सक्षम करना चाहता हूं
आशा है कि यह आपकी मदद करता है