এইচটিএমএল ফর্মটি কেবলমাত্র ট্যাগ / ইনপুট নির্বাচন করুন

Question

এইচটিএমএল স্প্যাস অনুসারে, এইচটিএমএল selectট্যাগটিতে একটি নেইreadonly বৈশিষ্ট্য নেই, কেবল একটি disabledবৈশিষ্ট্য। সুতরাং আপনি যদি ড্রপডাউন পরিবর্তন থেকে ব্যবহারকারীকে রাখতে চান তবে আপনাকে ব্যবহার করতে হবে disabled।

একমাত্র সমস্যা হ'ল অক্ষম এইচটিএমএল ফর্ম ইনপুটগুলি পোষ্ট / জিইটি ডেটাতে অন্তর্ভুক্ত হয় না।

readonlyকোনও selectট্যাগের জন্য বৈশিষ্ট্যটি অনুকরণ করার সর্বোত্তম উপায় কী এবং এখনও পোষ্ট ডেটা পাওয়া যায়?

Comments

সার্ভারের পক্ষে এটির উপর নির্ভর করবেন না। যে কেউ তাদের নিজস্ব HTML পৃষ্ঠা তৈরি করতে এবং এটি আরডাব্লু করতে পারে।

— ব্রেন্ডন বাইার্ড

তবে এটি কোনও পিএইচপি-নির্দিষ্ট প্রশ্ন নয়।

— কালেব ব্রসি

আমি এই ক্ষেত্রে কোনও নির্বাচিত উপাদান ব্যবহার না করার পরামর্শ দেব। আপনি কেবল প্লেইন পাঠ্য হিসাবে মানটি প্রদর্শন করতে পারবেন না এমন কোনও কারণ আছে?

— বিগ ম্যাকলার্জহিউজ

@ মন্তব্য আপনার মন্তব্য কোন অর্থ দেয় না। আমি বলছি না যে নির্বাচন বা লুকানো ফর্ম ক্ষেত্রগুলির জন্য কখনও ভাল ব্যবহারের কেস নেই। ওপিকে পৃষ্ঠায় কিছু পাঠ্য প্রদর্শন করতে সমস্যা হচ্ছিল এবং আমি কেবল ভাবছিলাম যে এই ক্ষেত্রে একটি নির্বাচিত উপাদান ব্যবহার করার উদ্দেশ্য কী।

— বড় ম্যাকলার্জহিউজ

আমি অবশ্যই ভুল প্রশ্ন পড়ছি। তিনি বলেছেন যে তিনি নির্বাচনটি অক্ষম করতে চান যাতে ব্যবহারকারী এটি পরিবর্তন না করে। হতে পারে তাকে পরিবর্তনগুলি প্রতিরোধের জন্য পৃষ্ঠাটি রেন্ডার এবং jquery ব্যবহারের প্রয়োজন। কিন্তু যখন সে এটি জমা দেয় তখন এর কোনও ডেটা থাকে না। আমিও তাই করছিলাম। আমার অন্যান্য নির্বাচিতদের দ্বারা ফিল্টার হওয়া নির্বাচনগুলি প্রদর্শন করতে হবে এবং শেষ ড্রপ ডাউনটি অ্যাজ্যাক্সের মাধ্যমে ডিবিতে সংরক্ষণ করে যাতে পূর্ববর্তী সমস্ত লকইনড করতে হবে। আমি যখন পৃষ্ঠাটি রেন্ডার করব, হ্যাঁ, ঠিক আছে - আমি নির্বাচনের পরিবর্তে লেবেলগুলি প্রদর্শন করতে পারি। তবে সমস্যাটি নয় :)

— পাইটর কুলা

Answer 1

আপনার selectউপাদানটি রাখা উচিত disabledতবে inputএকই নাম এবং মান সহ আরও একটি লুকানো থাকবে ।

আপনি যদি নিজের নির্বাচনটিকে পুনরায় সক্ষম করেন তবে আপনার মূল্যটি কোনও অন্বেষণ ইভেন্টে লুকানো ইনপুটটিতে অনুলিপি করা উচিত এবং লুকানো ইনপুটটি অক্ষম (বা অপসারণ) করা উচিত।

এখানে একটি ডেমো রয়েছে:

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});

#formdata_container {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

Comments

আপনি যদি নির্বাচনটি পুনরায় সক্ষম করেন তবে অবশ্যই অবশ্যই অবশ্যই লুকানো ইনপুটটি অক্ষম বা মুছে ফেলতে হবে (বর্ণিত হিসাবে এর মানটি অনুলিপি করার পরে) অবশ্যই। অন্যথায় আপনি ডাবল জমা দেওয়া মান পাবেন

— অ্যাডাম

@ ম্যাক্স আহ! ঠিক আছে, এটি কাজ করে। আমি ধরে নিয়েছি যেহেতু আপনি বলেছেন যে লুকানো ইনপুটটির "একই নাম" থাকা উচিত যা নির্বাচকের একটি নাম ছিল।

— অ্যাডাম

আমি যদি একাধিক নির্বাচন ব্যবহার করি?

— আনিউল রিভাস

একই নামের দুটি উপাদান থাকা কেবল শেষ সক্ষমিত ইনপুট / নির্বাচিত পোস্ট করবে, দ্বিগুণ নয়। এছাড়াও, কেবলমাত্র selectedমানটি সম্পূর্ণ তালিকাতে ফিরে পোস্ট হয় না। সুতরাং, আপনার hiddenআগে বসে selectএবং নির্বাচিত মানটি ধরে রাখে। যদি নির্বাচনটি "কেবলমাত্র পঠনযোগ্য" জন্য অক্ষম হয়ে যায়, তবে পোস্ট পিছনে কেবল লুকানো ইনপুটটির মান থাকবে। নির্বাচনটি সক্ষম করা থাকলে, দৃশ্যমান নির্বাচিত বিকল্পটি লুকানো মানটিকে "ওভার রাইটিং / রিপ্লেসমেন্ট" করবে এবং এটি সেই মান যা আবার পোস্ট হবে।

— পাইটর কুলা

যদিও এটি সুস্পষ্ট সমাধান, এটি সমাধান হিসাবে সফল হয়, যেহেতু আপনাকে অন্য একটি ইনপুট ক্ষেত্র যুক্ত করতে হবে।

— ডোনাটো

Answer 2

আমরা এটি ব্যবহার করতে পারে

নির্বাচিত বিকল্প ব্যতীত সমস্ত অক্ষম করুন:

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

এইভাবে ড্রপডাউন এখনও কাজ করে (এবং এর মান জমা দেয়) তবে ব্যবহারকারী অন্য মান নির্বাচন করতে পারে না।

ডেমো

Comments

ডায়নামিক অপশনের জন্য দুর্দান্ত একটি

— দিয়েগো ফ্যাভেরো

একক মান সलेक्ट ট্যাগের জন্য উপযুক্ত! তবে কোনও <একাধিক নির্বাচন করুন> এর পক্ষে কাজ করবে না, যা ব্যবহারকারীদের নির্বাচিত কয়েকটি বিকল্পকে অনির্বাচিত করার অনুমতি দেবে, এইভাবে মান পরিবর্তন করে।

— মিখাইল বুনকিন

optionট্যাগের disabledবৈশিষ্ট্যের জন্য ব্রাউজার সমর্থন

— জো।

এটি একটি দুর্দান্ত সমাধান। আমি যুক্ত করব যে আপনি jQuery এর সাহায্যে এটি সহজেই অর্জন করতে পারেন: $("#yourSelectId option:not(:selected)).attr("disabled", "disabled")

— ওঙ্কেল-জ

Answer 3

আপনি জমা দেওয়ার সময় নির্বাচন করা বস্তুটি পুনরায় সক্ষম করতে পারেন।

সম্পাদনা : অর্থ্যাৎ সাধারণত নির্বাচিত ট্যাগটি অক্ষম করা (অক্ষম বৈশিষ্ট্যযুক্ত) এবং তারপরে ফর্মটি জমা দেওয়ার ঠিক আগে এটি স্বয়ংক্রিয়ভাবে পুনরায় সক্ষম করে:

JQuery সহ উদাহরণ:

• এটি অক্ষম করতে:

  $('#yourSelect').prop('disabled', true);

• জমা দেওয়ার আগে এটি পুনরায় সক্ষম করতে যাতে GET / POST ডেটা অন্তর্ভুক্ত থাকে:

  $('#yourForm').on('submit', function() {
      $('#yourSelect').prop('disabled', false);
  });

এছাড়াও, আপনি প্রতিটি অক্ষম ইনপুট পুনরায় সক্ষম করতে বা নির্বাচন করতে পারেন:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

Comments

অক্ষম সম্পত্তি সেট করতে .prop ('অক্ষম', সত্য / মিথ্যা) ব্যবহার করুন। বৈশিষ্ট্যটি আসল অবস্থা পরিবর্তন করবে না।

— প্যারিস চর 2

আমি মনে করি এই সমাধানটি @ বেজম্যাক্স সমাধানের চেয়ে চতুর । কারণ আমরা যদি লুকানো ইনপুট যুক্ত করি, আমাদের বিবেচনা করতে হবে যে প্রতিটি ইনপুটগুলির মধ্যে একটিরই (একই নাম) যে কোনও সময় সক্ষম হয়েছিল। অন্যথায়, যদি উভয় ইনপুট সক্ষম করা থাকে তবে সার্ভার সাইডে, প্রোগ্রামটি ইনপুটটির অ্যারে নেবে যা ব্যতিক্রমের কারণ হতে পারে (উদাহরণস্বরূপ যদি আমরা এই পরিস্থিতিটি পরিচালনা না করে, এবং আমরা একটি স্ট্রিং আশা করি এবং 'অনুরোধ.ফর্ম [ফিল্ডনাম]] 'কমান্ড)

— মিট

@ কেভিন, কাজ করে> 90% কেস এছাড়াও, আপনি আপনার বেল্টে jquery থাকতে হবে ... এহ।

— সাইটলিজ

এটি গ্রহণযোগ্য উত্তর অনেক ক্লিনার। আপনি যদি উপাদানটি আর অক্ষম না করতে চান এবং কোনও অতিরিক্ত ইনপুট ট্যাগগুলি না চান তবে যুক্তিটিকে পূর্বাবস্থায় ফেলা সহজ ier

— হাওহামারু

Answer 4

কোনও উপাদানটির readOnlyসাথে একটি বৈশিষ্ট্যটি সম্পাদনের অন্য উপায় selectহ'ল ব্যবহার করেcss

আপনি যেমন করতে পারে:

$('#selection').css('pointer-events','none');

ডেমো

Comments

সুন্দর সমাধান। তবে আপনি কীবোর্ডের সাহায্যে মানটি পরিবর্তন করতে পারেন।

— মারিও ওয়ার্নার

হ্যাঁ এটি বেশ দুর্দান্ত। কীবোর্ডের সাহায্যে মানটি পরিবর্তন করতে আপনাকে ত্বকের তালিকায় আসতে হবে এবং এটি তখন নির্বাচিত হয়ে যায়। যদি আপনি ব্যাকগ্রাউন্ডের রঙ ধূসর বা অক্ষম করে তোলেন, তবে ব্যবহারকারীটিকে এটি "অক্ষম" হওয়ার পরে প্রকৃতপক্ষে অক্ষম করা হলে আপনি দর্শনীয়ভাবে তাকে অবহিত করছেন। কেহ কেহ কেহই আইই সমর্থন করে না। আপনি যদি প্রতিরোধ করতে চান তবে আপনি ডিফল্ট একটি কীডাউন প্রতিরোধ রাখতে পারেন।

— পাইটর কুলা

বেশ অপ্রথাবাদী !! যদি নির্বাচনের পৃষ্ঠা রেন্ডার থেকে ব্লক করা দরকার,... .on('mouseover', function(){ ... });

— ফ্র0zenFyr

pointer-events: noneমাউস কার্সার থেকে ফোকাস প্রতিরোধ করে। কীবোর্ড থেকে ফোকাস প্রতিরোধ করতে, আপনি সমস্ত ফোকাস ইভেন্টের সাথে সাথে ঝাপসা করে এটি পরিপূরক করতে পারেন:$('select').css('pointer-events', 'none').on('focus', function () {$(this).blur();});

— কুইন কমেন্ডেন্ট

Answer 5

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

উইন্ডোজ এবং গুগল ক্রোমের জন্য IE 6, 7 এবং 8b2, ফায়ারফক্স 2 এবং 3, অপেরা 9.62, সাফারি 3.2.1 এ পরীক্ষিত এবং কাজ করছে।

Comments

এটির সাথে সমস্যাটি হ'ল ড্রপডাউনটি এমনভাবে রেন্ডার করা হয় যেন এটি কেবল পঠনযোগ্য নয়। ব্যবহারকারী ভাবেন যে জিনিসটি কাজ করে না ...

— লুকাশ এডার

এটি ব্যবহারকারীর জন্য বিভ্রান্তিকর কারণ তারা এখনও একটি বিকল্প নির্বাচন করতে পারে তবে তারা যখন এটি নির্বাচন করে তবে তালিকাটি পূর্বে নির্বাচিত মানটিতে ফিরে আসে। ব্যবহারকারীর যেকোন কিছু বাছাই করতে বাধা দেওয়ার জন্য তালিকাটি অক্ষম করা অনেক বেশি স্বজ্ঞাত।

— দানা

আমার অনুরূপ সমস্যা ছিল এবং এটি কেবলমাত্র নির্বাচিত বিকল্প প্রদর্শন করে সমাধান করে। কোনও <select id="countries"> <option value="7" selected="selected">Country7</option> </select>

— জেএসের

@ পিপমকিন @ ডানা @ লুকাস এডার ন .. আপনি যদি এই ইউএক্স ঠিক করতে পারেন তবে নয়। উদাহরণস্বরূপ, আপনি onchange = 'this.selectedIndex=this.defaultIndex; alert("You should not change this..");'কেবল নির্বাচিত সূচকটি নিঃশব্দে পরিবর্তনের পরিবর্তে এর মতো কিছু করতে পারেন ..

— ফ্র0জেনফায়ার

@ লুকাসেদার প্রত্যুত্তরকারীদের অভিজ্ঞতা সম্পর্কে যে কেউ উদ্বিগ্ন, তারা ড্রপ ডাউনটি পরিবর্তন করা উচিত নয় বলে সত্যিই জোর দেওয়ার জন্য কিছু সিএসএস যুক্ত করতে পারেন। এতে কার্সার not-allowedএবং ব্যাকগ্রাউন্ড-রঙ সেট করুন #CCC।

— আলেকজান্ডার ডিকসন

Answer 6

সহজ jQuery সমাধান

আপনার নির্বাচিতদের readonlyক্লাস থাকলে এটি ব্যবহার করুন

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

অথবা এটি যদি আপনার নির্বাচনের readonly="readonly"বৈশিষ্ট্য থাকে

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

Comments

আপনার কোডটি কিছুটা ব্যাখ্যা করুন। আমাদের কি নির্বাচিত উপাদানগুলিতে একটি 'পঠনযোগ্য' শ্রেণি যুক্ত করতে হবে? আমাদের কখন এই কোডটি কল করতে হবে: কেবলমাত্র ডকুমেন্টে ready প্রস্তুত বা প্রতিবারই কোনও নির্বাচন সক্ষম / অক্ষম করা আছে? আপনার কোড নোগ্রিপ্ট নিরাপদ?

— আনার খলিলভ

$(document).ready(function(){$('select option:not(:selected)').attr('disabled',true);});একক নির্বাচন ঠিক কাজ করে। কোনও "পঠনযোগ্য" শ্রেণির প্রয়োজন নেই। একাধিক বাছাই সমস্যাযুক্ত কারণ যদি ইতিমধ্যে নির্বাচিত একাধিক বিকল্প থাকে এবং তাই অক্ষম না হয় এবং ব্যবহারকারী কোনও অক্ষম না করা বিকল্পগুলির একটি নির্বাচন করে, তবে পূর্বের নির্বাচিত অন্যান্য অপশনটি নির্বাচিত হয়ে যায়।

— গর্ডন

এর কোন কিছুই বুঝতে পারছি না

— পাইটর কুলা

এটি "পঠনযোগ্য" শ্রেণীর সাথে বাছাই করা বাক্সগুলির জন্য নির্বাচিত ব্যতীত অন্য বিকল্পগুলি অক্ষম করে। আপনার হাতে নির্বাচিত উপাদান থাকলে আপনি লিখতে পারেন:$select.find('option').not(':selected').attr('disabled', 'disabled');

— সেমরা

আমি এই সমাধানটি পছন্দ করি। আমি নির্বাচকটিকে select[readonly]এমনভাবে পরিবর্তন করব যাতে আপনি কেবলমাত্র উপাদানটিতে কেবলমাত্র পাঠ্য বৈশিষ্ট্য যুক্ত করেন - এইভাবে আপনাকে অন্য কোনও ধরণের তুলনায় বাছাইকারীদের আলাদাভাবে আচরণ করতে হবে না। জাভাস্ক্রিপ্ট এর পরে ক্রমান্বয়ে প্রভাব বাড়ায়। মনে রাখবেন যে এই সমাধানটি (এবং অন্যান্য বেশিরভাগ) কেবলমাত্র ব্যবহারকারী এজেন্টকে সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করতে সহায়তা করে - এটি আসলে কিছুই প্রয়োগ করে না (এটি প্রয়োজনে সার্ভার-সাইডটি করা আবশ্যক)।

— jgivoni

Answer 7

সাধারণ সিএসএস সমাধান:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

হোভারে দুর্দান্ত "অক্ষম" কার্সার সহ ধূসর হতে সিলেক্ট করার ফলাফল এবং নির্বাচনের
বিকল্পগুলির তালিকা "খালি" তাই আপনি এর মান পরিবর্তন করতে পারবেন না।

Comments

আপনার যদি কোনও সিএসআরএফ বৈধতা রয়েছে (যেমন সিমফোনি এবং অন্যান্য ফ্রেমওয়ার্কগুলির মতো) তবে এটি কার্যকর হবে না।

— থিবিশপ

Answer 8

তবুও আরও একটি সমসাময়িক বিকল্প (কোনও পাং উদ্দেশ্যে নয়) হ'ল নির্বাচিত উপাদানের অন্যান্য বিকল্পগুলি তারপরে নির্বাচিতটিকে অক্ষম করা।

তবে নোট করুন যে এটি একটি এইচটিএমএল 4.0.০ বৈশিষ্ট্য এবং অর্থাত্ ,,7,৮ বিটা ১ এটি সম্মান করে না বলে মনে হচ্ছে।

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

Answer 9

এটি আমি খুঁজে পেয়েছি সেরা সমাধান:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

উপরের কোডটি নির্বাচিত বিকল্পটি সক্ষম করে রাখার সময় নির্বাচিত নয় এমন অন্যান্য সমস্ত বিকল্প অক্ষম করে । এটি করা নির্বাচিত বিকল্পটি এটি পোস্ট-ব্যাক ডেটাতে পরিণত করবে।

Answer 10

আমি জানি যে এটি অনেক দেরি হয়ে গেছে, তবে এটি সাধারণ সিএসএস দিয়ে করা যেতে পারে:

select[readonly] option, select[readonly] optgroup {
    display: none;
}

শৈলীটি সমস্ত বিকল্প এবং গোষ্ঠীগুলি গোপন করে যখন নির্বাচনটি নির্বাচন করা হয় readonly রাষ্ট্রের হয়, সুতরাং ব্যবহারকারী তার নির্বাচন পরিবর্তন করতে পারবেন না।

কোনও জাভাস্ক্রিপ্ট হ্যাকের প্রয়োজন নেই।

Comments

সুন্দর এবং সহজ। আমি এটা পছন্দ করি.

— জোনাথন পিতামাতা লভেস্ক

এটি সমস্যার খুব সুন্দর সমাধান। ধন্যবাদ!

— ওডারওয়াট

Answer 11

আরও সহজ: আপনার নির্বাচিত ট্যাগটিতে শৈলীর বৈশিষ্ট্য যুক্ত করুন :

style="pointer-events: none;"

Comments

এটি আমার জন্য কাজ তবে পয়েন্টার ইভেন্টগুলি ক্রস ব্রাউজারগুলিকে সমর্থন করবে?

— অভিজিৎ জগতাপ

এটা কাজ করবে না। ব্যবহারকারী কীবোর্ড ব্যবহার করে ইনপুট পরিবর্তন করতে পারে।

— সন্ধু

Answer 12

এটি সহজ এবং সর্বোত্তম সমাধান। আপনি আপনার নির্বাচনের উপর একটি রিডলনি অ্যাটর্নি সেট করবেন, বা ডেটা-পঠনের মতো অন্য কোনও অ্যাটর্নি এবং নীচেরটি করবেন

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

Comments

আপনার কী-আপ বিজ্ঞাপন কীডাউনটি এখানে যুক্ত করা উচিত পাশাপাশি ড্রপডাউনটি এটিতে এখনও "ট্যাবিং" করে পাওয়া যায় এবং মান পরিবর্তন করতে তীর কীগুলি ব্যবহার করুন।

— এপিএফজেড

Answer 13

আপনি যখন কেবলমাত্র পঠনযোগ্য হওয়ার জন্য পরিকল্পনা করেন তখন নির্বাচিত অক্ষমকে সেট করুন এবং তারপরে ফর্মটি জমা দেওয়ার ঠিক আগে অক্ষম বৈশিষ্ট্যটি সরান।

// global variable to store original event/handler for save button
var form_save_button_func = null;

// function to get jQuery object for save button
function get_form_button_by_id(button_id) {
    return jQuery("input[type=button]#"+button_id);
}

// alter value of disabled element
function set_disabled_elem_value(elem_id, value)  {
    jQuery("#"+elem_id).removeAttr("disabled");
    jQuery("#"+elem_id).val(value);
    jQuery("#"+elem_id).attr('disabled','disabled');
}

function set_form_bottom_button_save_custom_code_generic(msg) {
    // save original event/handler that was either declared
    // through javascript or html onclick attribute
    // in a global variable
    form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.6
    //form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.7

    // unbind original event/handler (can use any of following statements below)
    get_form_button_by_value('BtnSave').unbind('click');
    get_form_button_by_value('BtnSave').removeAttr('onclick');

    // alternate save code which also calls original event/handler stored in global variable
    get_form_button_by_value('BtnSave').click(function(event){
        event.preventDefault();
        var confirm_result = confirm(msg);
        if (confirm_result) {
            if (jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").length > 0) {
                jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").removeAttr("disabled");
            }

            // disallow further editing of fields once save operation is underway
            // by making them readonly
            // you can also disallow form editing by showing a large transparent
            // div over form such as loading animation with "Saving" message text
            jQuery("form.anyForm").find('input[type=text], textarea, select').attr('ReadOnly','True');

            // now execute original event/handler
            form_save_button_func();
        }
    });
}

$(document).ready(function() {
    // if you want to define save button code in javascript then define it now

    // code below for record update
    set_form_bottom_button_save_custom_code_generic("Do you really want to update this record?");
    // code below for new record
    //set_form_bottom_button_save_custom_code_generic("Do you really want to create this new record?");

    // start disabling elements on form load by also adding a class to identify disabled elements
    jQuery("input[type=text]#phone").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("input[type=text]#fax").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("select#country").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("textarea#address").addClass('disabled-form-elem').attr('disabled','disabled');

    set_disabled_elem_value('phone', '123121231');
    set_disabled_elem_value('fax', '123123123');
    set_disabled_elem_value('country', 'Pakistan');
    set_disabled_elem_value('address', 'address');

}); // end of $(document).ready function

Comments

এটি এমন একটি দৌড় শর্তের মতো হওয়ার অপেক্ষা করছে।

— ব্রেন্ডন বাইার্ড

Answer 14

অপশনগুলি নির্বাচনযোগ্য না হওয়া নিষ্ক্রিয় করার পাশাপাশি আমি আসলে তাদের তালিকা থেকে অপসারণ করতে চাইছিলাম, তবে পরবর্তী সময়ে আমার প্রয়োজন পরে সেগুলি সক্ষম করতে সক্ষম হব:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

এটি একটি পঠনযোগ্য বৈশিষ্ট্যযুক্ত সমস্ত নির্বাচিত উপাদানগুলি সন্ধান করে, তারপরে নির্বাচিত নয় এমন নির্বাচনের ভিতরে সমস্ত বিকল্প খুঁজে বের করে, তারপরে এটি তাদের আড়াল করে এবং অক্ষম করে।

পারফরম্যান্স কারণে jquery ক্যোয়ারী 2 টি পৃথক করা গুরুত্বপূর্ণ, কারণ jquery এগুলি ডান থেকে বামে কোড পড়ে:

$("select[readonly] option:not(:selected)")

প্রথমে ডকুমেন্টে সমস্ত অনির্বাচিত বিকল্পগুলি খুঁজে বের করবে এবং তারপরে অভ্যন্তরীণ নির্বাচিতগুলিকে কেবল পাঠযোগ্য অ্যাট্রিবিউট দিয়ে ফিল্টার করবে।

Comments

সম্ভবত .prop("disabled", true)পরিবর্তে

— স্যাম

Answer 15

একটি সাধারণ সার্ভার-সাইড অ্যাপ্রোচ হ'ল আপনি নির্বাচন করতে চান এমনটি বাদে সমস্ত বিকল্প অপসারণ করা। সুতরাং, জেন্ডার ফ্রেমওয়ার্ক 1.12-এ, যদি $ উপাদানটি একটি জেন্ড_ফর্ম_এলমেন্ট_সুলিপি হয়:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);

Answer 16

আপনি যদি কোনও ফর্ম ক্ষেত্রটি অক্ষম করেন, ফর্মটি জমা দেওয়ার পরে এটি প্রেরণ করা হবে না। সুতরাং আপনার যদি প্রয়োজন readonlyমতো কাজ করে disabledতবে মানগুলি পাঠানো এটি করুন:

কোনও উপাদানের পঠনযোগ্য বৈশিষ্ট্যে কোনও পরিবর্তন হওয়ার পরে।

$('select.readonly option:not(:selected)').attr('disabled',true);

$('select:not([readonly]) option').removeAttr('disabled');

Answer 17

ট্যাবিনডেক্সের সাথে সমাধান। নির্বাচন করুন তবে পাঠ্য ইনপুটগুলির সাথেও কাজ করে।

কেবলমাত্র একটি .ডিয়েবল ক্লাস ব্যবহার করুন।

সিএসএস:

.disabled {
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */
}

জাতীয়:

$(".disabled").attr("tabindex", "-1");

এইচটিএমএল:

<select class="disabled">
    <option value="0">0</option>
</select>

<input type="text" class="disabled" />

---

সম্পাদনা: ইন্টারনেট এক্সপ্লোরার সহ আপনারও এই জেএস দরকার:

$(document).on("mousedown", ".disabled", function (e) {
    e.preventDefault();
});

Answer 18

গ্রান্ট ওয়াগনারদের পরামর্শ অনুসরণ করে; এখানে একটি jQuery স্নিপেট রয়েছে যা এটি সরাসরি অনএক্সএক্সএক্স বৈশিষ্ট্যের পরিবর্তে হ্যান্ডলার ফাংশনগুলির সাথে করে:

var readonlySelect = function(selector, makeReadonly) {

    $(selector).filter("select").each(function(i){
        var select = $(this);

        //remove any existing readonly handler
        if(this.readonlyFn) select.unbind("change", this.readonlyFn);
        if(this.readonlyIndex) this.readonlyIndex = null;

        if(makeReadonly) {
            this.readonlyIndex = this.selectedIndex;
            this.readonlyFn = function(){
                this.selectedIndex = this.readonlyIndex;
            };
            select.bind("change", this.readonlyFn);
        }
    });

};

Answer 19

আমি jquery দিয়ে এটি সমাধান:

      $("select.myselect").bind("focus", function(){
        if($(this).hasClass('readonly'))
        {
          $(this).blur();   
          return;
        }
      });

Comments

এটি খুব সুন্দরভাবে কাজ করেছে, যদিও মাউসওভার অ্যানিমেশনটি এখনও ড্রপডাউন তীরটি দেখায় যা দেখতে পারা যায়।

— Johncl

এটি ক্রোম 26 এ আমার জন্য কাজ করছে না: নির্বাচন এখনও সম্পূর্ণরূপে কার্যকরী।

— অ্যান্ডি

আপনি যখন IE এ ডাবল ক্লিক করেন তবে এটি তালিকাটি এখনও প্রদর্শন করে। যাইহোক যে প্রতিরোধ?

— ব্যবহারকারী 1995781

Answer 20

আপনি jquery বৈধতা ব্যবহার করে থাকেন, আপনি নীচে নিম্নলিখিতটি করতে পারেন, আমি কোনও সমস্যা ছাড়াই অক্ষম বৈশিষ্ট্যটি ব্যবহার করেছি:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

Answer 21

আমি যা খুঁজে পেয়েছি তা দুর্দান্ত কাজ করে, প্লেইন জাভাস্ক্রিপ্ট সহ (যেমন: কোনও জিকুয়ের লাইব্রেরির প্রয়োজন নেই), তা হ'ল <select>ট্যাগের অভ্যন্তরীণ এইচটিএমএলকে পছন্দসই একক বাকী মানটিতে পরিবর্তন করা ।

আগে:

<select name='day' id='day'>
  <option>SUN</option>
  <option>MON</option>
  <option>TUE</option>
  <option>WED</option>
  <option>THU</option>
  <option>FRI</option>
  <option>SAT</option>
</select>

নমুনা জাভাস্ক্রিপ্ট:

document.getElementById('day').innerHTML = '<option>FRI</option>';

পরে:

<select name='day' id='day'>
  <option>FRI</option>
</select>

এইভাবে, কোনও ভিজ্যুয়াল এফেক্ট পরিবর্তন হবে না এবং এটি এর মধ্যে পোস্ট / জিইটি হবে <FORM>।

Answer 22

নিজেই সিলেক্ট করার পরিবর্তে আপনি বর্তমানে নির্বাচিত বিকল্পটি বাদ দিয়ে সমস্ত বিকল্প অক্ষম করতে পারবেন। এটি একটি ওয়ার্কিং ড্রপ-ডাউনের উপস্থিতি দেয় তবে কেবলমাত্র আপনি যে বিকল্পটি পাস করতে চান তা বৈধ নির্বাচন।

Comments

তাত্ত্বিকভাবে একটি দুর্দান্ত ধারণা - তবে আইই 8 এর আগে আইআইজে অক্ষম বিকল্পগুলির জন্য কোনও সমর্থন নেই। tinyurl.com/yle4bto

— scunliffe

Answer 23

এইচটিএমএল সমাধান:

<select onfocus="this.blur();">

জাভাস্ক্রিপ্ট এক:

selectElement.addEventListener("focus", selectElement.blur, true); selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

মুছে ফেলার জন্য:

selectElement.removeEventListener("focus", selectElement.blur, true); selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

সম্পাদনা: অপসারণ পদ্ধতি যোগ করা হয়েছে

Comments

@ বাটলবাটকাস জাভাস্ক্রিপ্টগুলি কী কাজ করে? আমার ধারণা এটি ব্রাউজার সম্পর্কিত সমস্যা হতে পারে you আপনি উপাদানটিতে একটি টবিনডেক্স যুক্ত করার চেষ্টা করেছেন

— কাদমিলোস

Answer 24

সহজভাবে, ফর্মটি জমা দেওয়ার আগে অক্ষম বৈশিষ্ট্যটি সরান।

    $('form').submit(function () {
        $("#Id_Unidade").attr("disabled", false);
    });

Answer 25

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->ডেটাবেস থেকে আপনার মান পাবেন এবং এটি ফর্মটিতে এটি প্রদর্শিত হবে। readonly="readonly" ->আপনি নির্বাচন বাক্সে আপনার মান পরিবর্তন করতে পারেন, তবে আপনার মানটি আপনার ডাটাবেসে সংরক্ষণ করতে পারেনি।

Comments

ভুল, এটি সংরক্ষিত দেখে মনে হচ্ছে যে 'পঠনযোগ্য' সম্পত্তিটি সমস্ত ব্রাউজারগুলি দ্বারা প্রক্রিয়াজাত করা হয় না এবং তাই বিশ্বাসযোগ্য নয়।

— ধনী

Answer 26

যদি নির্বাচিত ড্রপডাউনটি জন্মের পর থেকে কেবল পঠনযোগ্য হয় এবং একেবারেই পরিবর্তনের প্রয়োজন হয় না, সম্ভবত এর পরিবর্তে আপনার অন্য একটি নিয়ন্ত্রণ ব্যবহার করা উচিত? একটি সাধারণ <div>(প্লাস লুকানো ফর্ম ক্ষেত্র) বা একটি <input type="text">?

যোগ করা হয়েছে: যদি ড্রপডাউনটি কেবলমাত্র সর্বদা পঠনযোগ্য না হয় এবং জাভাস্ক্রিপ্ট এটি সক্ষম / অক্ষম করতে ব্যবহৃত হয়, তবে এটি এখনও একটি সমাধান just কেবলমাত্র অন-দ্য ফ্লাইটে ডিওএম পরিবর্তন করুন।

Comments

এটি প্রথম থেকেই পাঠ্য নয়। আমি জাভাস্ক্রিপ্ট ব্যবহার এবং পরিবর্তন করতে। যদি আগের ড্রপডাউনটির একটি নির্দিষ্ট মান থাকে তবে এটি কেবল পঠনযোগ্য হয়ে যায়।

— Jrgns

তারপরে সম্ভবত আপনি এই ড্রপডাউনটিকে ফ্লাইটে টেক্সটবক্সের সাথে প্রতিস্থাপন করতে পারেন?

— ভিলেক্স-

হ্যাঁ, তবে সর্বদা লুকানো ইনপুটটি আমার মতে আরও মার্জিত

— Jrgns

Answer 27

নীচে আমার জন্য কাজ করেছেন:

$('select[name=country]').attr("disabled", "disabled"); 

Comments

এফওয়াইআই: অক্ষম ফর্ম ক্ষেত্র কোনও জমা দেওয়ার অন্তর্ভুক্ত হবে না।

— mz_01

Answer 28

আমি এটি নির্বাচিত বাক্সটি গোপন করে এবং spanকেবল তথ্যের মান সহ এর জায়গায় একটি প্রদর্শন করে পরিচালনা করেছি । .readonlyক্লাসটি অক্ষম করার ইভেন্টে , আমাদের .toVanishউপাদানগুলি অপসারণ করতে এবং সেগুলি .toShowদেখানোও দরকার।

 $( '.readonly' ).live( 'focus', function(e) {
                $( this ).attr( 'readonly', 'readonly' )
                if( $( this ).get(0).tagName == 'SELECT' ) {
                    $( this ).before( '<span class="toVanish readonly" style="border:1px solid; padding:5px">' 
                            + $( this ).find( 'option:selected' ).html() + '</span>' )
                    $( this ).addClass( 'toShow' )
                    $( this ).hide()
            }
    });

Answer 29

আইইতে আমি ডাবল-ক্লিক করে অনফোকাস => অনব্লুর পদ্ধতিকে পরাস্ত করতে সক্ষম হয়েছি। তবে মানটি মনে রাখা এবং তারপরে পুনরুদ্ধার ইভেন্টে এটি পুনরুদ্ধার করা মনে হয় যে সমস্যাটি হ্যান্ডেল করে।

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

আপনি জাভাস্ক্রিপ্ট ভেরিয়েবল ব্যবহার করে প্রসারিত বৈশিষ্ট্য ছাড়াই একই কাজ করতে পারেন।

Answer 30

কার্যকারিতা অর্জনের জন্য এখানে একটি কাস্টম jQuery ফাংশন ব্যবহার করার চেষ্টা করা হয়েছে (এখানে যেমন উল্লেখ করা হয়েছে):

$(function(){

 $.prototype.toggleDisable = function(flag) {
    // prepare some values
    var selectId = $(this).attr('id');
    var hiddenId = selectId + 'hidden';
    if (flag) {
      // disable the select - however this will not submit the value of the select
      // a new hidden form element will be created below to compensate for the 
      // non-submitted select value 
      $(this).attr('disabled', true);

      // gather attributes
      var selectVal = $(this).val();
      var selectName = $(this).attr('name');

      // creates a hidden form element to submit the value of the disabled select
      $(this).parents('form').append($('<input></input>').
        attr('type', 'hidden').
        attr('id', hiddenId).
        attr('name', selectName).
        val(selectVal) );
    } else {
      // remove the newly-created hidden form element
      $(this).parents('form').remove(hiddenId);
      // enable back the element
      $(this).removeAttr('disabled');
    }
  }

  // Usage
  // $('#some_select_element').toggleDisable(true);
  // $('#some_select_element').toggleDisable(false);

});