কীভাবে jquery ব্যবহার করে পঠনযোগ্যভাবে ড্রপডাউন করবেন?

Question 1

আমি নীচের বিবৃতিটি এটি পাঠযোগ্যভাবে তৈরি করতে ব্যবহার করছি তবে এটি কার্যকর হচ্ছে না not

$('#cf_1268591').attr("readonly", "readonly");

আমি এটিকে অক্ষম করতে চাই না, আমি এটি কেবল পঠন করতে চাই।

Question 2

$('#cf_1268591').attr("disabled", true);

ড্রপ ডাউন সবসময় কেবল পঠিত হয়। আপনি যা করতে পারেন তা এটি অক্ষম করে দেওয়া

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

Question 3

আমার একই সমস্যা ছিল, আমার সমাধানটি ছিল বাছাই না করা সমস্ত বিকল্প অক্ষম করা। JQuery সহ খুব সহজ:

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

সম্পাদনা => একই পৃষ্ঠায় যদি আপনার একাধিক ড্রপডাউন থাকে তবে নীচের মতো নির্বাচন-আইডিতে নির্বাচিত সমস্ত অপশন অক্ষম করুন।

$('#select_field_id option:not(:selected)').attr('disabled', true);

Question 4

এটি আপনি যা খুঁজছেন:

$('#cf_1268591').attr("style", "pointer-events: none;");

একটি যাদুমন্ত্র মত কাজ করে.

Question 5

এটি ব্যবহার করে দেখুন .. নির্বাচিত মানটি অক্ষম না করে ..

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

এটা আমার জন্য কাজ করে..

Question 6

সাথে একটি উপাদান সেট করা disabledডেটা জমা দেবে না, তবে selectউপাদানগুলির মধ্যে নেই readonly।

আপনি একটি সিমুলেট করতে readonlyউপর selectstyling এবং জাতীয় ট্যাব সঙ্গে পরিবর্তন রোধ করার জন্য জন্য CSS ব্যবহার করছে:

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

তারপরে এটি ব্যবহার করুন:

var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
    $(i.target).val($(this).attr('data-original-value'));
});

ফলাফল:

কোড স্নিপেট দেখান

  // Updated 08/2018 to prevent changing value with tab
$('a').on('click', function() {
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
	$(i.target).val($(this).attr('data-original-value'));
});
});

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click here to enable readonly</a>
<select>
<option>Example 1</option>
<option selected>Example 2</option>
<option>Example 3</option>
</select>

স্নিপেট প্রসারিত করুন

Question 7

আমি ক্ষেত্রটি অক্ষম করতাম। তারপরে, ফর্মটি জমা দেওয়ার সময়, এটি অক্ষম না করে রাখুন। আমার মতে, লুকানো ক্ষেত্রগুলির সাথে ডিল করার চেয়ে এটি সহজ।

//disable the field
$("#myFieldID").prop( "disabled", true );           

//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
    $("#myFieldID").prop( "disabled", false );
});

Question 8

নির্বাচিত বিকল্পগুলি অপসারণ করার জন্য সরল jquery।

$('#your_dropdown_id option:not(:selected)').remove();

Question 9

জিনিসগুলিকে সরল করতে এখানে jQuery প্লাগইন যা ঝামেলা ছাড়াই করে: https://github.com/haggen/readonly

Question 10

এই লাইনটি readonlyকেবল পঠনযোগ্য গুণাবলী দিয়ে নির্বাচন করে :

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

Question 11

এই কোডটি প্রতিটি ড্রপডাউনতে প্রথমে মূল নির্বাচন সংরক্ষণ করবে। তারপরে যদি ব্যবহারকারী নির্বাচনটি পরিবর্তন করে তবে এটি ড্রপডাউনটিকে তার আসল নির্বাচনে পুনরায় সেট করবে।

http://jsfiddle.net/4aHcD/22/

//store the original selection
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

//change the selction back to the original
$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});

Question 12

এটা খুব ভাল কাজ

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

এর সাহায্যে আমি বিকল্পগুলি দেখতে পাচ্ছি তবে আমি এটি নির্বাচন করতে পারি না

Question 13

আমার পক্ষে সহজ বিকল্পটি ছিল পঠনযোগ্য হিসাবে নির্বাচন করা এবং যুক্ত করা:

onmousedown="return false" onkeydown="return false"

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

Question 14

এটি একটি পুরানো নিবন্ধ, তবে আমি যারা খুঁজে পাবে তাদের সতর্ক করতে চাই। নাম অনুসারে উপাদান পেয়ে অক্ষম বৈশিষ্ট্যের সাথে সাবধান হন। আশ্চর্যজনক তবে এটি খুব বেশি কাজ করে না বলে মনে হচ্ছে।

এটি কাজ করে না:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

এই কাজ:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

হ্যাঁ, আমি জানি যে আমার আরও ভালভাবে প্রপ ব্যবহার করা উচিত এবং এটির নয়, তবে কমপক্ষে এখন প্রসেসটি জেকুরির পুরানো সংস্করণের কারণে কাজ করবে না, এবং এখন আমি এটি আপডেট করতে পারছি না, কেন তা জিজ্ঞাসা করবেন না ... এইচটিএমএল পার্থক্য কেবল যুক্ত করা হয়েছে আইডি:। ..

<select name="img_size" class="dropDown" id="img_size">
<option value="200">200px
</option><option value="300">300px
</option><option value="400">400px
</option><option value="500">500px
</option><option value="600" selected="">600px
</option><option value="800">800px
</option><option value="900">900px
</option><option value="1024">1024px
</option></select>

<input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" />

...

আমি স্ক্রিপ্টে কোনও ত্রুটি খুঁজে পাইনি, এবং নাম সহ সংস্করণে, কনসোলে কোনও ত্রুটি ছিল না। তবে অবশ্যই কোডে আমার ভুল হতে পারে

এতে দেখা গেছে: উইন 7 প্রো-তে ক্রোম 26

খারাপ ব্যাকরণের জন্য দুঃখিত।

Question 15

আমি খুঁজে পেয়েছি, এটি করার একটি আরও ভাল উপায় হ'ল সিএসএস ব্যবহার করে পয়েন্টার-ইভেন্টগুলি সরাতে এবং ড্রপ ডাউন-এ অস্বচ্ছতা পরিবর্তন করতে হবে (০.০ চেষ্টা করুন)। এটি ব্যবহারকারীর উপস্থিতি দেয় যে এটি স্বাভাবিক হিসাবে অক্ষম থাকলেও এখনও ডেটা পোস্ট করে।

এটি পিছনে সামঞ্জস্যের সাথে কিছু সমস্যা রয়েছে তা নিশ্চিত, তবে আমার মতে বিরক্তিকর অক্ষম / পঠনযোগ্য ইস্যুটি পাওয়ার চেয়ে ভাল বিকল্প।

Question 16

আপনি এটি অক্ষম করতে এবং এই মুহুর্তে আপনি জমা কলটি সক্ষম করে it আমি মনে করি সবচেয়ে সহজ উপায় :)

Question 17

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

$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});

http://jsfiddle.net/4aHcD/

Question 18

"কীপ্রেস আপ" থাকাকালীন খালি স্ট্রিং তৈরি করার চেষ্টা করুন

এইচটিএমএল হ'ল:

<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">

জ্যাকুরি হ'ল:

$("#cf_1268591").combobox({
  url:"your url",
  valueField:"id",
  textField:"text",
  panelWidth: "350",
  panelHeight: "200",
});

// খালি স্ট্রিং সহ কীআপের পরে তৈরি করুন

var tb = $("#cf_1268591").combobox("textbox");
  tb.bind("keyup",function(e){
  this.value = "";
});

Question 19

হয়তো আপনি এইভাবে চেষ্টা করতে পারেন

function myFunction()
{
   $("select[id^=myID]").attr("disabled", true);
   var txtSelect = $("select[id^=myID] option[selected]").text();
}

এটি ড্রপ-ডাউনের প্রথম মানটি ডিফল্ট হিসাবে সেট করে এবং এটি কেবল পঠনযোগ্য বলে মনে হয়

Question 20

এইচটিএমএল 5 সমর্থন:

`
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');

`

Question 21

অক্ষম ব্যবহারের পরামর্শ দেয় এমন অন্যান্য জবাবগুলিতে এখানে সামান্য প্রকরণ রয়েছে। যেহেতু "অক্ষম" বৈশিষ্ট্যটির কোনও মান থাকতে পারে এবং এখনও অক্ষম করা যায়, আপনি অক্ষম = "পঠনযোগ্য" এর মতো এটি কেবল পঠনযোগ্যতে সেট করতে পারেন। এটি নিয়ন্ত্রণটি যথারীতি অক্ষম করবে এবং সিএসএসের মতো নিয়মিত অক্ষম নিয়ন্ত্রণগুলির চেয়ে সহজেই এটি আলাদাভাবে স্টাইল করতে দেয়:

select[disabled=readonly] {
    .... styles you like for read-only
}

আপনি যদি ডেটা জমা অন্তর্ভুক্ত করতে চান তবে অন্যান্য উত্তরের বিবরণ হিসাবে গোপন ক্ষেত্রগুলি ব্যবহার করুন বা জমা দেওয়ার আগে সক্ষম করুন।

Question 22

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

অধিক তথ্য

jQuery(document).ready(function($) {
  var $dropDown = $('#my-select'),
    name = $dropDown.prop('name'),
    $form = $dropDown.parent('form');

  $dropDown.data('original-name', name); //store the name in the data attribute 

  $('#toggle').on('click', function(event) {
    if ($dropDown.is('.disabled')) {
      //enable it 
      $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
      $dropDown.removeClass('disabled') //remove disable class 
        .prop({
          name: name,
          disabled: false
        }); //restore the name and enable 
    } else {
      //disable it 
      var $hiddenInput = $('<input/>', {
        type: 'hidden',
        name: name,
        value: $dropDown.val()
      });
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field 
      $dropDown.addClass('disabled') //disable class
        .prop({
          'name': name + "_1",
          disabled: true
        }); //change name and disbale 
    }
  });
});

/*Optional*/

select.disabled {
  color: graytext;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#" name="my-form">
  <select id="my-select" name="alpha">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</form>
<br/>
<button id="toggle">toggle enable/disable</button>

স্নিপেট প্রসারিত করুন