কীভাবে jQuery ব্যবহার করে নির্বাচিত ক্ষেত্রটি অক্ষম / সক্ষম করবেন?


177

আমি একটি ফর্ম একটি বিকল্প তৈরি করতে চাই

[] I would like to order a [selectbox with pizza] pizza

যেখানে সিলেক্টবক্স তখনই সক্ষম থাকে যখন চেকবক্সটি চেক করা হয় না এবং চেক না করা অবস্থায় অক্ষম থাকে।

আমি এই কোডটি নিয়ে এসেছি:

<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>

আমি বিভিন্ন পদ্ধতি চেষ্টা কিভাবে ব্যবহার অক্ষম অ্যাট্রিবিউট সেট করতে .prop(), .attr()এবং .disabled=। তবে কিছুই হয় না। <input type="checkbox">পরিবর্তে কোনও ক্ষেত্রে আবেদন করার <select>সময় কোডটি পুরোপুরি কার্যকর হয়।

কীভাবে <select>jQuery ব্যবহার করে অক্ষম / সক্ষম করবেন ?


হ্যালো, এই পদ্ধতিটি আইই 10 তে কাজ করে? আই ই 10. একটি নির্বাচন ক্ষেত্র সক্রিয় করতে কিভাবে জানি না
ROROROOROROR

উত্তর:


299

আপনি এই জাতীয় কোড ব্যবহার করতে চান:

<form>
  <input type="checkbox" id="pizza" name="pizza" value="yes">
  <label for="pizza">I would like to order a</label>
  <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select>
  pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $('#pizza_kind').prop('disabled', false);
    }
    else {
        $('#pizza_kind').prop('disabled', 'disabled');
    }
  };
  $(update_pizza);
  $("#pizza").change(update_pizza);
</script>

এখানে কাজ উদাহরণ


33
$('#pizza_kind').prop('disabled', false);এবং $('#pizza_kind').prop('disabled', true);। যেমন jQuery এর ডকুমেন্টেশন বলে : বৈশিষ্ট্যগুলি সিরিয়ালযুক্ত এইচটিএমএল বৈশিষ্ট্যটি পরিবর্তন না করে সাধারণত কোনও ডম উপাদানটির গতিশীল অবস্থাকে প্রভাবিত করে। উদাহরণগুলির মধ্যে ইনপুট উপাদানগুলির মান সম্পত্তি, ইনপুট এবং বোতামগুলির অক্ষম সম্পত্তি বা একটি চেকবাক্সের চেক করা সম্পত্তি অন্তর্ভুক্ত। .Prop () পদ্ধতিটি .attr () পদ্ধতির পরিবর্তে অক্ষম এবং চেক করা সেট করতে ব্যবহার করা উচিত। .Val () পদ্ধতিটি মান অর্জন এবং সেট করার জন্য ব্যবহার করা উচিত।
নাওর

2
jQuery 3 এর জন্য এটি "$ ('# পিৎজা_কিন্ড') হওয়া উচিত prop প্রপ ('অক্ষম', সত্য / মিথ্যা);" যতদূর আমি জানি
Gennady G

3
$ কী (আপডেট_পিজা); করছেন? একটি jquery অবজেক্টে ফাংশন মোড়ানো?
এডওয়ার্ড

120

আপনার নির্বাচিত সমস্ত নির্বাচনের প্রথমে নির্বাচনগুলি অক্ষম / সক্ষম করতে সক্ষম হতে একটি আইডি বা শ্রেণি প্রয়োজন। তাহলে আপনি এই জাতীয় কিছু করতে পারেন:

অক্ষম করুন:

$('#id').attr('disabled', 'disabled');

সক্ষম করুন:

$('#id').removeAttr('disabled');

7
".Prop () পদ্ধতিটি .attr () পদ্ধতির পরিবর্তে অক্ষম এবং চেক করার জন্য ব্যবহার করা উচিত" উত্স: api.jquery.com/prop
কলিন

2
এটি নির্বাচিত উত্তর হওয়া উচিত .. স্কিমিংয়ের জন্য অনেক বেশি ভাল :)
ক্রাইমুল

এই উত্তরটি .removeAttr()আর আর মিথ্যা jquery.com / আপগ্রেড
মার্ক শুলথিস

24

অক্ষম একটি হল বুলিয়ান অ্যাট্রিবিউট এর নির্বাচন উপাদান যেমন বলেছেন WHATWG , তার মানে সঠিক পথ অক্ষম jQuery সঙ্গে হবে

jQuery("#selectId").attr('disabled',true);

এটি এই এইচটিএমএল তৈরি করবে

<select id="selectId" name="gender" disabled="disabled">
    <option value="-1">--Select a Gender--</option>
    <option value="0">Male</option>
    <option value="1">Female</option>
</select>

এটি এক্সএইচটিএমএল এবং এইচটিএমএল উভয়ের জন্যই কাজ করে (ডাব্লু 3 স্কুল রেফারেন্স)

তবুও এটি সম্পত্তি হিসাবে এটি ব্যবহার করেও করা যেতে পারে

jQuery("#selectId").prop('disabled', 'disabled');

পেয়ে

<select id="selectId" name="gender" disabled>

যা কেবলমাত্র এইচটিএমএল এর জন্য কাজ করে, এক্সটিএমএল নয়

দ্রষ্টব্য: এই প্রশ্নের উত্তর হিসাবে একটি প্রতিবন্ধী উপাদান ফর্মের সাথে জমা দেওয়া হবে না: অক্ষম ফর্ম উপাদানটি জমা দেওয়া হয়নি

দ্রষ্টব্য: একটি অক্ষম উপাদান গ্রে আউট হতে পারে।

নোট 3:

অক্ষম করা একটি ফর্ম নিয়ন্ত্রণ অবশ্যই ব্যবহারকারীর ইন্টারঅ্যাকশন টাস্ক উত্সটিতে সারিবদ্ধ যে কোনও ক্লিক ইভেন্টগুলিকে উপাদানটিতে প্রেরণ করা থেকে বিরত রাখতে হবে।

টি এল; ডিআর

<script>
    var update_pizza = function () {
        if ($("#pizza").is(":checked")) {
            $('#pizza_kind').attr('disabled', false);
        } else {
            $('#pizza_kind').attr('disabled', true);
        }
    };
    $(update_pizza);
    $("#pizza").change(update_pizza);
</script>


8

নিম্নলিখিত ব্যবহার:

$("select").attr("disabled", "disabled");

অথবা কেবল যোগ id="pizza_kind"করতে <select>চাই, ট্যাগ <select name="pizza_kind" id="pizza_kind">: jsfiddle লিংক

আপনার কোডটি কাজ না করার কারণটি কেবলমাত্র উপাদানটি $("#pizza_kind")নির্বাচন <select>না করা কারণ এটি নেই id="pizza_kind"

সম্পাদনা: আসলে, আরও ভাল নির্বাচকটি হ'ল $("select[name='pizza_kind']"): jsfiddle লিঙ্ক


5

আপনার selectকোনও আইডি নেই, কেবল একটি নাম। আপনাকে আপনার নির্বাচককে সংশোধন করতে হবে:

$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});

ডেমো: http://jsbin.com/imokuj/2/edit


5

পুরানো থ্রেডে উত্তর দেওয়ার জন্য দুঃখিত তবে আমার কোডটি ভবিষ্যতে অন্যকে সহায়তা করতে পারে i আমি একই পরিস্থিতিতে ছিলাম যে যখন চেক বাক্সটি চেক করা হবে তখন কয়েকটি নির্বাচিত ইনপুট ক্ষেত্রগুলি অন্যান্য বুদ্ধিমান অক্ষমকে সক্ষম করবে।

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});

2

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

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