যখন কোনও অক্ষর করা হয় তখন একটি <নির্বাচন> ফর্ম ক্ষেত্রটি কীভাবে জমা দেওয়া হয় তা নিশ্চিত করবেন?


180

আমার আছে একটি select ফর্ম ক্ষেত্র রয়েছে যা আমি "কেবলমাত্র পঠনযোগ্য" হিসাবে চিহ্নিত করতে চাই, ব্যবহারকারী হিসাবে মানটি পরিবর্তন করতে পারে না, তবে মানটি এখনও ফর্মের সাথে জমা দেওয়া হয়। disabledবৈশিষ্ট্যটি ব্যবহার করা ব্যবহারকারীর মান পরিবর্তন করতে বাধা দেয় তবে ফর্মের সাথে মান জমা দেয় না।

readonlyঅ্যাট্রিবিউট জন্য কেবল প্রাপ্তিসাধ্যinput এবং textareaক্ষেত্র, কিন্তু যে মূলত আমি কি চাই না। কাজ করার কোনও উপায় আছে?

দুটি সম্ভাবনার বিষয়ে আমি বিবেচনা করছি এর মধ্যে রয়েছে:

  • পরিবর্তে অক্ষম select , এর নিষ্ক্রিয় সব options এবং ব্যবহার সিএসএস আউট ধূসর নির্বাচন তাই এটি তার অক্ষম মত দেখায়।
  • জমা বাটনে একটি ইভেন্ট ইভেন্ট হ্যান্ডলার যুক্ত করুন যাতে এটি ফর্মটি জমা দেওয়ার আগে সমস্ত অক্ষম ড্রপডাউন মেনুগুলিকে সক্ষম করে।

2
দেরিতে যোগদানের জন্য দুঃখিত, তবে @ trafalmadorianসর্বোত্তমতম দ্বারা সরবরাহ করা সমাধানগুলি । এটি নির্বাচিত নয় এমন সমস্ত ইনপুট অক্ষম করে। এটি নির্বাচন করে যদি এটিতে একাধিক বিকল্প সক্ষম থাকে। $('#toSelect')find(':not(:selected)').prop('disabled',true);
অভিষেক মাধনী

বিকল্পভাবে, আপনি নিয়ন্ত্রণটি ইউআই-তে অক্ষম হিসাবে ছেড়ে দিতে পারেন তবে ক্রিয়া পদ্ধতিতে মানটি পুনরুদ্ধার করতে পারেন: পাবলিক অ্যাকশনসাল্ট ইনসেটরেকর্ড (মাইটাইপ মডেল) {যদি (Model.MyProperty == নাল) {Model.MyProperty = অনুরোধ ["মাইপ্রোপার্টি"]; }}
beastieboy

উত্তর:


118
<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

select_nameআপনি সাধারণত যে নামটি দিবেন তা কোথায়<select>

অন্য একটি বিকল্প।

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

এখন এইটির সাথে আমি লক্ষ্য করেছি যে আপনি কোন ওয়েবসারভার ব্যবহার করছেন তার উপর নির্ভর করে আপনাকে hiddenইনপুটটি আগে বা পরে রাখতে হবে<select>

আমার স্মৃতি যদি IIS এর সাথে সঠিকভাবে পরিবেশন করে তবে আপনি এটি আগে রেখেছিলেন, আপাচে আপনি এটি পরে রেখেছিলেন। সর্বদা হিসাবে, পরীক্ষার চাবিকাঠি।


3
এটি কীভাবে ওয়েব সার্ভারের উপর নির্ভর করবে ? এটি কি ক্লায়েন্ট নয় যা নির্বাচিত ক্ষেত্রের সাথে পৃষ্ঠাটি রেন্ডার করে, এবং এই জাতীয় মতবিরোধের ক্ষেত্রে এটি ক্লায়েন্টই সিদ্ধান্ত নেবে যে সার্ভারে মান প্রেরণ করবে কিনা?
ইলারি কাজস্তে

8
এটি সার্ভার একই নামের সাথে একাধিক ইনপুট কীভাবে পরিচালনা করে তার উপর নির্ভর করে।
জর্দান এস জোনস

1
আপনি কোনও নির্দিষ্ট সার্ভারের ধরণের উপর নির্ভর না করাই ভাল, তাই আমার মনে হয় প্রথম পদ্ধতির পরিচ্ছন্নতা এবং ত্রুটি-প্রবণতা কম ..
লূক

5
@ জর্দান: ব্রাউজারগুলি সার্ভারে অক্ষম ক্ষেত্রের মানগুলি প্রেরণ করে না, এ কারণেই আপনি যখন তাদের সার্ভার-সাইড পরিচালনা করার চেষ্টা করবেন তখন তারা খালি থাকে। আপনার যদি পছন্দসই মান সহ কোনও লুকানো ক্ষেত্র থাকে এবং দৃশ্যমান ক্ষেত্রগুলি অক্ষম থাকে তবে কেবল লুকানো ক্ষেত্রটি সার্ভারে প্রেরণ করা হবে। তবে, লুকানো ক্ষেত্রটি কেবল তখনই তৈরি করা উচিত (জেএস বা সার্ভার-সাইড কোডের মাধ্যমে) যখন দৃশ্যমান ক্ষেত্রগুলি অক্ষম থাকে এবং কোনও অগ্রাধিকারের সমস্যা থাকে না।
ম্যাট ভ্যান Andel

1
জাভাস্ক্রিপ্ট ছাড়াই কাজ করে এমন কোনও ফর্মের প্রয়োজন হলে এটি কেবলমাত্র বিকল্প।
অ্যান্ড্রু

224

ক্ষেত্রগুলি অক্ষম করুন এবং তারপরে ফর্মটি জমা দেওয়ার আগে তাদের সক্ষম করুন:

jQuery কোড:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

15
বেশ সুন্দর সমাধান!
ক্রিস

2
এটিই আমি স্থির করেছিলাম, কারণ এটি সর্বনিম্ন বাধাজনক।
জনাথন

3
jQuery এর ডক্স .prop এবং .removeProp ব্যবহার করার প্রস্তাব দিই 'পরীক্ষিত' এর জন্য, .attr পরিবর্তে 'নির্বাচিত' এবং 'প্রতিবন্ধী' এবং .removeAttr http://api.jquery.com/prop/ দেখতে
জিম বার্গম্যানের

2
@ জিমবার্গম্যানের মন্তব্যের প্রাসঙ্গিক বিট - "বৈশিষ্ট্যগুলি সিরিয়ালযুক্ত এইচটিএমএল বৈশিষ্ট্যটি পরিবর্তন না করেই সাধারণত কোনও ডোম উপাদানটির গতিশীল অবস্থাকে প্রভাবিত করে। উদাহরণগুলির মধ্যে ইনপুট উপাদানগুলির মান সম্পত্তি, ইনপুট এবং বোতামগুলির অক্ষম সম্পত্তি, বা চেকবক্সের চেক করা সম্পত্তি অন্তর্ভুক্ত রয়েছে। .Prop () পদ্ধতিটি .attr () পদ্ধতির পরিবর্তে অক্ষম এবং চেক করার জন্য ব্যবহার করা উচিত। - api.jquery.com/prop
জোশুয়া ডান্স

2
আপনি একজন প্রতিভা (Y)
টমিডো

13

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

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

সরল, আপনি যখন ক্ষেত্রটির উপর দৃষ্টি নিবদ্ধ করবেন তখন কেবল অস্পষ্ট হয়ে যাবেন, এটি অক্ষম করার মতো কিছু, তবে আপনি আসলে এটির ডেটা প্রেরণ করেন।


বাহ দুর্দান্ত এবং সহজ সমাধান। ধন্যবাদ .. আমার কাছ থেকে +1 :)
উল ওয়াহাব

আমি এটি অনেক পছন্দ করি .. আমার ফর্মের মিথস্ক্রিয়াগুলির উপর নির্ভর করে উপাদানগুলি সক্ষম / অক্ষম হয়ে যায় ফিরে-এন ... এই দৃশ্যে আমি কীভাবে 'অস্পষ্ট' ক্ষেত্রটি পুনরায় সক্ষম করব?
bkwdesign

গুগলিং থেকে, দেখে মনে হচ্ছে $ ('# সিলেক্টবক্স')। অফ ('ফোকাস'); পুনরায় সক্রিয় করার কৌশলটি করবে
bkwdesign

2
পাঠ্য বাক্সগুলির জন্য কাজ করে, নির্বাচিত বাক্সগুলির জন্য কাজ করে না, পাশাপাশি বোতাম টিপে ধরে এবং ধরে রাখার জন্য খুব সহজেই সহজে কাজ করতে পারে
অ্যান্ড্রু

7

আমি কিছুটা ভিন্ন দৃশ্যের মুখোমুখি হয়েছিলাম, আমি কেবলমাত্র পূর্ববর্তী সিলেক্টবক্সের উপর ভিত্তি করে ব্যবহারকারীকে নির্বাচিত মানটি পরিবর্তন করার অনুমতি না দিতে চাইছিলাম। আমি যা করতে পেরেছি তা হল সিলেক্টবক্সে অন্যান্য নির্বাচিত অপশনগুলি ব্যবহার করে কেবল অক্ষম করা

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

ধন্যবাদ, আমি আপনাকে সবচেয়ে যুক্তিযুক্তভাবে সাদামাটা পেয়েছি তবে এর attrসাথে propকিছুটা পরিবর্তন হওয়া উচিত , দেখতে এমন কিছু হবে$('#toSelect')find(':not(:selected)').prop('disabled',true);
অভিষেক মাধনী

6

ট্রেস দ্বারা jQuery ব্যবহার না করে একই সমাধান প্রস্তাবিত

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

এটি কাউকে আরও বুঝতে সহায়তা করতে পারে, তবে স্পষ্টতই jQuery এর চেয়ে কম নমনীয়।


তবে, এটি একাধিক নির্বাচকদের পক্ষে ভাল নয়। আমরা কি ব্যবহার করতে পারি getElementsByTagName('select')?
ভাগ্যবান

6

এটি নির্বাচন করে: ক্ষেত্রগুলির জন্য ইনপুট নির্বাচনকারী, এটি ব্যবহার করুন:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

5

নির্বাচনগুলিতে অক্ষম বিকল্পগুলির জন্য আমি পরবর্তী কোড ব্যবহার করি

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

4

আমি খুঁজে পাওয়া সবচেয়ে সহজ উপায়টি ছিল আপনার ফর্মের সাথে যুক্ত একটি ছোট জাভাস্ক্রিপ্ট ফাংশন তৈরি করা:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

এবং আপনি এটি এখানে আপনার ফর্ম এ কল করুন:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

অথবা আপনি নিজের ফর্মটি যাচাই করতে যে ফাংশনটি ব্যবহার করেন তা কল করতে পারেন :)


4

জমা দেওয়ার আগে একটি লাইন যুক্ত করুন।

$ ( "# Xyz") removeAttr ( "অক্ষম")।


2

অথবা কিছু জাভাস্ক্রিপ্ট ব্যবহার করে নির্বাচনের নাম পরিবর্তন করুন এবং এটি অক্ষম করে দিন। এইভাবে নির্বাচনটি এখনও জমা দেওয়া হয়েছে, তবে একটি নাম ব্যবহার করে আপনি চেক করছেন না।


2

আমি একটি দ্রুত (কেবল জ্যাকুই) প্লাগইন বেত্রাঘাত করেছি, যা ইনপুট অক্ষম থাকাকালীন কোনও ডেটা ক্ষেত্রে মান সংরক্ষণ করে। এর অর্থ কেবলমাত্র যতক্ষন ক্ষেত্রটি .prop () বা .attr () ব্যবহার করে জ্যাকুয়ারির মাধ্যমে প্রোগ্রামমেটিকভাবে অক্ষম করা হচ্ছে ... তারপরে .val (), .সিরিয়ালাইজ () বা .সরিয়ালাইজআররা () দ্বারা মান অ্যাক্সেস করা সর্বদা ফিরে আসবে অক্ষম হলেও মান

নির্লজ্জ প্লাগ: https://github.com/Jezternz/jq-dis اهل- ইনপুট


2

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

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

'অবজেক্ট' প্যারামিটারটি অবশ্যই একটি
জেকারি

1

আমি একটি কার্যক্ষম সমাধান পেয়েছি: নির্বাচিতটিকে বাদ দিয়ে সমস্ত উপাদান সরিয়ে ফেলুন। তারপরে আপনি স্টাইলটি এমন কিছুতে পরিবর্তন করতে পারেন যা দেখতে অক্ষম দেখায়। JQuery ব্যবহার:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

0
<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

-8

আর একটি বিকল্প হ'ল পঠনযোগ্য বৈশিষ্ট্যটি ব্যবহার করা।

<select readonly="readonly">
    ....
</select>

কেবলমাত্র পঠনযোগ্যভাবেই মূল্য জমা দেওয়া হয়, ইনপুট ক্ষেত্রটি ধূসর হয়ে যায় এবং ব্যবহারকারী এটি সম্পাদনা করতে পারে না।

সম্পাদনা:

Http://www.w3.org/TR/html401/interact/forms.html#adef- Readonly থেকে উদ্ধৃত :

  • কেবল পঠনযোগ্য উপাদানগুলি ফোকাস গ্রহণ করে তবে ব্যবহারকারীর দ্বারা পরিবর্তন করা যায় না।
  • কেবল পঠনযোগ্য উপাদানগুলি ট্যাবিং নেভিগেশনে অন্তর্ভুক্ত রয়েছে।
  • কেবল পঠনযোগ্য উপাদানগুলি সফল হতে পারে।

যখন এটি বলে যে উপাদানটি সফল হতে পারে, তার অর্থ এটি এখানে জমা দেওয়া হিসাবে জমা দেওয়া হতে পারে: http://www.w3.org/TR/html401/interact/forms.html#successful-controls


6
নিয়ন্ত্রণটি ধূসর হয় না এবং ব্যবহারকারী এটি সম্পাদনা করতে পারেন। আপনি পুরো বিভাগটি পড়তে ব্যর্থ হয়েছিলেন এবং আমি উদ্ধৃতি দিয়েছি: "নিম্নলিখিত উপাদানগুলি কেবল পঠনযোগ্য বৈশিষ্ট্যকে সমর্থন করে: ইনপুট এবং টেক্সটারিএ।"
কার্লোস রেনডন

3
আমি জানি যে এটি একটি পুরানো উত্তর, তবে এটি আসলে কাজ করে। আমি অনেক ডাউনভোটের কারণ জানি না।
জুই লুইস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.