উত্তর:
উপরের উত্তরগুলির মধ্যে অনেকগুলি কেবল ফর্ম উপাদানগুলিতে কাজ করে। কোনও ডিআইভি এর বিষয়বস্তু সহ অক্ষম করার একটি সহজ উপায় হ'ল মাউস ইন্টারঅ্যাকশন অক্ষম করা। উদাহরণ স্বরূপ:
$("#mydiv").addClass("disabledbutton");CSS
.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();এখানে এমন একটি লোকেদের জন্য দ্রুত মন্তব্য দেওয়া হচ্ছে যাদের ডিভের প্রয়োজন নেই তবে কেবল একটি ব্লকলেট রয়েছে। এইচটিএমএল 5 <fieldset disabled="disabled"></fieldset>এ অক্ষম বৈশিষ্ট্য পেয়েছে। অক্ষম ফিল্ডসেটের প্রতিটি ফর্ম উপাদান অক্ষম।
অক্ষম বৈশিষ্ট্যটি ডিআইভি উপাদানগুলির জন্য ডাব্লু 3 সি অনুচ্ছেদের অংশ নয় , কেবল ফর্ম উপাদানগুলির জন্য ।
মার্টিনের প্রস্তাবিত jQuery পদ্ধতির হ'ল আপনি এটি সম্পাদন করতে যাচ্ছেন একমাত্র নির্বোধ উপায়।
ইভেন্টগুলি অক্ষম করতে আপনি এই সাধারণ সিএসএস বিবৃতিটি ব্যবহার করতে পারেন
#my-div {
pointer-events:none;
}
ব্রাউজারগুলি পরীক্ষা করেছে: আইই 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);
}
}আপনি জানেন যে এইচটিএমএল ইনপুট নিয়ন্ত্রণগুলি 'অক্ষম' বৈশিষ্ট্যটি ব্যবহার করে অক্ষম করা যায়। একবার কোনও ইনপুট নিয়ন্ত্রণের জন্য 'অক্ষম' বৈশিষ্ট্য সেট হয়ে গেলে, এই জাতীয় নিয়ন্ত্রণের সাথে যুক্ত ইভেন্ট হ্যান্ডলারগুলি শুরু করা হয় না।
আপনি যদি চান তবে এইচটিএমএল উপাদানগুলির উপরের আচরণের অনুকরণ করতে হবে যা ডিভের মতো 'অক্ষম' বৈশিষ্ট্যটিকে সমর্থন করে না।
আপনার যদি একটি ডিভি থাকে এবং আপনি এই ডিভের উপর ক্লিক বা কোনও মূল ইভেন্টটি সমর্থন করতে চান, তবে আপনাকে দুটি জিনিস করতে হবে: 1) আপনি যখন ডিভটি অক্ষম করতে চান, তার অক্ষম বৈশিষ্ট্যটি যথারীতি সেট করুন (কেবলমাত্র এর সাথে মেনে চলতে কনভেনশন) ২) আপনার ডিভের ক্লিক এবং / অথবা কী হ্যান্ডলারগুলিতে, ডিভের উপর অক্ষম বৈশিষ্ট্য সেট করা আছে কিনা তা পরীক্ষা করে দেখুন। যদি তা হয় তবে কেবল ক্লিক বা কী ইভেন্টটিকে উপেক্ষা করুন (যেমন কেবল অবিলম্বে ফিরে আসুন)। যদি অক্ষম বৈশিষ্ট্য সেট না করা থাকে তবে আপনার ডিভের ক্লিক এবং / অথবা কী ইভেন্টের যুক্তিটি করুন do
উপরের পদক্ষেপগুলি ব্রাউজারের পাশাপাশি স্বাধীন।
এটি অর্জনের একটি উপায় হ'ল ডিভের সমস্ত শিশুদের প্রতিবন্ধী প্রাপ যুক্ত করা। আপনি এটি খুব সহজেই অর্জন করতে পারেন:
$("#myDiv").find("*").prop('disabled', true);$("#myDiv")ডিভটি সন্ধান করে .find("*"), আপনাকে সমস্ত স্তরে সমস্ত শিশু নোড দেয় এবং .prop('disabled', true)প্রতিটি অক্ষম করে।
এইভাবে সমস্ত সামগ্রী অক্ষম হয়ে গেছে এবং আপনি সেগুলিতে ক্লিক করতে পারবেন না, সেগুলিতে ট্যাব করতে পারেন, তাদের স্ক্রল করুন ইত্যাদি Also এছাড়াও, আপনার কোনও CSS ক্লাস যুক্ত করার দরকার নেই।
আমি ভেবেছিলাম কয়েক নোটে চিপ করব।
এটি অনুসন্ধানকারীদের জন্য,
আমি সবচেয়ে ভাল করেছিলাম,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);মন্তব্যে উল্লিখিত হিসাবে, আপনি এখনও ট্যাব কী ব্যবহার করে উপাদানগুলির মধ্যে নেভিগেট করে উপাদান অ্যাক্সেস করতে সক্ষম হন। সুতরাং আমি এটি সুপারিশ:
$("#mydiv")
.css({"pointer-events" : "none" , "opacity" : "0.4"})
.attr("tabindex" , "-1");আমি ক্লিটাসের ফাংশনের একটি উন্নত সংস্করণ ব্যবহার করব:
$.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সম্পত্তি একাই শিশু উপাদানগুলি স্ক্রোলিং থেকে অক্ষম করে না, এবং এটি আইই 10 দ্বারা সমর্থিত নয় এবং ডিআইভি উপাদানগুলির জন্য (কেবল এসভিজির জন্য) সমর্থনযোগ্য নয়।
http://caniuse.com/#feat=pointer-events
সমস্ত ব্রাউজারে একটি ডিআইভি বিষয়বস্তু অক্ষম করতে।
javascript:
$("#myDiv")
.addClass("disable")
.click(function () {
return false;
});CSS:
.disable {
opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
overflow: hidden;
}আইআই 10 এবং তার চেয়ে কম বয়সী ব্যতীত সমস্ত ব্রাউজারগুলিতে একটি ডিআইভির সামগ্রী অক্ষম করতে।
javascript:
$("#myDiv").addClass("disable");CSS:
.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;
}নীচে মাস্কিং ডিভগুলি সক্ষম করার জন্য আরও বিস্তৃত সমাধান
এছাড়াও অন্তর্ভুক্ত রয়েছে ঘড়িঘড়ি ও আওয়ারগ্লাস অফ যা আলাদাভাবে ব্যবহার করা যেতে পারে
// 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 maskদেখতে jsfiddle
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");
}অথবা কেবল CSS এবং একটি "অক্ষম" শ্রেণি ব্যবহার করুন।
দ্রষ্টব্য: অক্ষম বৈশিষ্ট্যটি ব্যবহার করবেন না।
বন্ধ / বন্ধ 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');
}জিকিউরিয়ায় অন্য একটি উপায় হ'ল অভ্যন্তরীণ উচ্চতা, অভ্যন্তরীণ প্রস্থ এবং ধারণকৃত ডিআইভির অবস্থান এবং কেবল একই ডিভাইসের উপরের স্বচ্ছ, অন্য একটি ডিআইভি overেকে দেওয়া। এটি কেবলমাত্র ইনপুটগুলির পরিবর্তে container পাত্রে সমস্ত উপাদানগুলিতে কাজ করবে।
যদিও জেএস অক্ষম থাকলেও আপনি এখনও ডিআইভি ইনপুট / সামগ্রী ব্যবহার করতে সক্ষম হবেন তা মনে রাখবেন। উপরের উত্তরগুলির সাথেও একই রকম।
এই সিএসএস কেবল / নোগ্রিপ্ট সমাধান ফিল্ডসেট (বা একটি ডিভি বা অন্য কোনও উপাদান) এর উপরে একটি ওভারলে যুক্ত করে, মিথস্ক্রিয়াটিকে রোধ করে:
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) তে সেট করুন, কারণ এটি ব্যাকগ্রাউন্ড ছাড়া কাজ করবে না। উপরোক্ত আই 9 + এর জন্য কাজ করে। নিম্নলিখিত অনেক সহজ সিএসএস আই 11 + এ কাজ করবে
[disabled] { pointer-events: none; }ক্রৌমিয়াম
আপনি যদি কেবল লোককে ক্লিক করা বন্ধ করার চেষ্টা করছেন এবং সুরক্ষা সম্পর্কে ভীতিজনকভাবে উদ্বিগ্ন না হন - আমি 99999 এর জেড-ইনডেক্সের সাথে এটির সূক্ষ্মরূপে একটি নিখুঁত স্থানযুক্ত ডিভ পেয়েছি। আপনি কোনও লিখিত সামগ্রী ক্লিক বা অ্যাক্সেস করতে পারবেন না কারণ এটির উপরে ডিভটি রাখা হয়েছে। কিছুটা সহজ হতে পারে এবং এটি অপসারণ না করা অবধি কেবল সিএসএসের সমাধান।
কনফিগারযোগ্য জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা এইচটিএমএল স্ট্রিং বা ডোম উপাদান নিয়ে থাকে এবং অনাকাঙ্ক্ষিত ট্যাগ এবং বৈশিষ্ট্যগুলি সরিয়ে দেয়। এগুলি এইচটিএমএল স্যানিটাইজার হিসাবে পরিচিত । উদাহরণ স্বরূপ:
যেমন ডোমপুরিফায় ify
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);গবেষণার পরেও কয়েকশ সমাধান! পয়েন্টার-ইভেন্টগুলি সম্পর্কে শিখছি, নীচে আমি যা করেছি তা হল।
যেমন @ কোকোডোকো তার সমাধানে উল্লেখ করেছেন যা আইই বাদে সমস্ত ব্রাউজারের জন্য উপযুক্ত। আইই 11 এpointer-events কাজ করুন এবং নিম্ন সংস্করণগুলিতে নয়। আমি আইই ১১ এও লক্ষ্য করেছি , পয়েন্টার-ইভেন্টগুলি শিশু উপাদানগুলিতে কাজ করে না। এবং তাই আমাদের যদি নীচের মতো কিছু থাকে
<a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>যেখানে সন্তানের উপাদান রয়েছে , এটিpointer-events: none কাজ করবে না
এই সমস্যাটি কাটিয়ে ওঠার জন্য আমি একটি ফাংশন লিখেছিলাম যা আইই এর পয়েন্টার-ইভেন্ট হিসাবে কাজ করতে পারে এবং নিম্ন সংস্করণগুলিতে কাজ করবে।
জেএস ফাইলে
DisablePointerEvents(".DisablePointerEvents");
function DisablePointerEvents(classId) {
$(classId).each(function () {
$(this).on('click', false );
$(this).on('contextmenu', false );
});
}সিএসএস ফাইলে
.DisablePointerEvents{
pointer-events: none;
opacity: 0.7;
cursor: default;
}এইচটিএমএলে
<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);fieldsetUserInfoDIV আছে সমস্ত ইনপুট আমি অক্ষম বা সক্ষম করতে চান রয়েছে
আশা করি এটি আপনাকে সাহায্য করবে