JQuery এ বোতাম অক্ষম করুন


358

আমার পৃষ্ঠাটি একাধিক বোতাম হিসাবে তৈরি করে id = 'rbutton_"+i+"'। নীচে আমার কোডটি দেওয়া হয়েছে:

<button type='button' id = 'rbutton_"+i+"' onclick=disable(i);>Click me</button>

জাভাস্ক্রিপ্টে

function disable(i){
    $("#rbutton'+i+'").attr("disabled","disabled");
}

আমি যখন ক্লিক করি তখন এটি আমার বোতামটি অক্ষম করে না।


6
'rbutton _ "+ i +"' একটি বৈধ আইডি নয়।
ডায়োডিয়াস - জেমস ম্যাকফারলেন 21

আমি কীভাবে আইডি নির্দিষ্ট করতে পারি। এটি আমার জাভাস্ক্রিপ্টটিতে একটি লুপের ভিতরে তৈরি হচ্ছে।
ব্যবহারকারী2047817

একটি জেএসফিডাল তৈরির বিষয়ে কীভাবে যাতে আমরা দেখতে পাচ্ছি যে আপনি কী করছেন?
j08691

5
আপনি সম্ভবত চাইবেন disable(this)এবংfunction disable(elem) { $(elem).attr("disabled","disabled") }
জেজেজে

2
jQuery উপাদানগুলিকে তাদের সূচক নম্বর ব্যবহার করে সম্বোধন করতে পারে, তাই আপনি যদি এটি সঠিকভাবে করেন তবে আপনার আইডিও লাগবে না। আপনি অক্ষম (এটি) একটি স্ব-উল্লেখ হিসাবে পাস করতে পারেন।
ডায়োডিয়াস - জেমস ম্যাকফার্লেনে

উত্তর:


637

.propপরিবর্তে ব্যবহার করুন (এবং আপনার নির্বাচক স্ট্রিং পরিষ্কার করুন):

function disable(i){
    $("#rbutton_"+i).prop("disabled",true);
}

উত্পাদিত এইচটিএমএল:

<button id="rbutton_1" onclick="disable(1)">Click me</button>
<!-- wrap your onclick in quotes -->

তবে "সেরা অনুশীলনগুলি" পদ্ধতিটি জাভাস্ক্রিপ্ট ইভেন্ট বাঁধাই এবং এর thisপরিবর্তে ব্যবহার করা হয়:

$('.rbutton').on('click',function() {
    $(this).prop("disabled",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="rbutton">Click me</button>

http://jsfiddle.net/mblase75/2Nfu4/


এখানে আমি তৈরি একটি ছোট্ট ফিডল। আমি কি ভুল করছি দয়া করে। jsfiddle.net/2Nfu4/3
user2047817

ঠিক আছে. এটি কোনও মোড়কে - মাথাতে কাজ করেছে..কিন্তু কেন আমি জিজ্ঞাসা করতে পারি কেন? এটি এমন কিছু হতে পারে, আমি আমার আসল কোডে এটি করছি না !!
ব্যবহারকারী2047817

জেএসফিডাল যেভাবে এটি সেট আপ করেছে, দেখে মনে হচ্ছে - ঠিক কী ঘটছে তা বিশ্লেষণ করতে চাইলে আপনি আপনার ব্রাউজারে "উপাদানটি পরীক্ষা করতে" পারেন।
ব্লেজমোনজার

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

JQuery 1.10.2 সহ এটি আইই 11 তে কাজ করে তবে ক্রোম সংস্করণ 39.0.2171.95 মিটারে নয়। সন্দেহজনকভাবে, এই উত্তরের জন্য ব্যবহৃত ফিডাল jQuery 1.10.2 সরবরাহ করে না
অ্যালেক্স

35

এই কোডটি ব্যবহার করে দেখুন:
এইচটিএমএল

<button type='button' id = 'rbutton_'+i onclick="disable(i)">Click me</button>

ক্রিয়া

function disable(i){
    $("#rbutton_"+i).attr("disabled","disabled");
}

Jquery সঙ্গে অন্যান্য সমাধান

$('button').click(function(){ 
    $(this).attr("disabled","disabled");
});

ডেমো


খাঁটি জাভাস্ক্রিপ্ট সহ অন্যান্য সমাধান

<button type='button' id = 'rbutton_1' onclick="disable(1)">Click me</button>

<script>
function disable(i){
 document.getElementById("rbutton_"+i).setAttribute("disabled","disabled");
}
</script>

DEMO2


দ্বিতীয়। ক্লিক () ফাংশনটি আপনার ডেমোতে পুরোপুরি কাজ করে। তবে আমি আপনার প্রথম সমাধানে উল্লিখিত পৃথক পদ্ধতিটি ব্যবহার করেছি তবে এটি কার্যকর হয় না। আপনি দয়া করে সাহায্য করতে পারেন !!
ব্যবহারকারী2047817

খাঁটি জাভাস্ক্রিপ্ট @ ব্যবহারকারীর সাথে একটি তৃতীয় সমাধান যুক্ত হয়েছে 2047817
আলেসান্দ্রো মিনোকেচেরি

29

এখানে দুটি জিনিস রয়েছে এবং ওপস প্রশ্ন অনুযায়ী সর্বাধিক ভোট দেওয়া উত্তর প্রযুক্তিগতভাবে সঠিক।

সংক্ষেপে সংক্ষেপে:

$("some sort of selector").prop("disabled", true | false);

তবে আপনি jQuery UI ব্যবহার করা উচিত (আমি জানি ওপিটি ছিল না তবে এখানে আগত কিছু লোক হতে পারে) তখন এটি বাটন ক্লিক ইভেন্টটিকে অক্ষম করবে যখন এটি ইউআই স্টাইলিং অনুসারে বোতামটি অক্ষম করে দেবে।

আপনি যদি jQuery UI স্টাইলযুক্ত বোতামটি ব্যবহার করেন তবে এটির মাধ্যমে এটি সক্ষম / অক্ষম করা উচিত:

$("some sort of selector").button("enable" | "disable");

http://api.jqueryui.com/button/#method-disable


27

এটি আমার মতে সরলতম উপায়:

// All buttons where id contains 'rbutton_'
const $buttons = $("button[id*='rbutton_']");

//Selected button onclick
$buttons.click(function() {
    $(this).prop('disabled', true); //disable clicked button
});

//Enable button onclick
$('#enable').click(() =>
    $buttons.prop('disabled', false) //enable all buttons
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rbutton_200">click</button>
<button id="rbutton_201">click</button>
<button id="rbutton_202">click</button>
<button id="rbutton_203">click</button>
<button id="rbutton_204">click</button>
<button id="rbutton_205">click</button>
<button id="enable">enable</button>


1
খুব সুন্দর স্যার। এটি পুরোপুরি কাজ করেছে। বুটস্ট্র্যাপ বোতামগুলির সাথেও।
স্টিভ মোরটজ


15

অক্ষম বোতাম:

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

সক্ষম বোতাম:

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

13

এইচটিএমএলে কেবল এটি ঠিকঠাক কাজ করেছে:

<button type="button" id="btn_CommitAll"class="btn_CommitAll">save</button>

জিকুয়েরিতে অক্ষম বোতামটির জন্য এই ফাংশনটি রাখুন:

function disableButton() {
    $('.btn_CommitAll').prop("disabled", true);
}

সক্ষম বোতাম জন্য:

function enableButton() {
    $('.btn_CommitAll').prop("disabled", false);
}

এখানেই শেষ.


3

আপনি আজাক্স দিয়ে এটি কীভাবে করেন তা এখানে।

$("#updatebtn").click(function () {
    $("#updatebtn").prop("disabled", true);
    urlToHandler = 'update.ashx';
            jsonData = data;
            $.ajax({
                url: urlToHandler,
                data: jsonData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    $("#lbl").html(data.response);
                    $("#updatebtn").prop("disabled", false);
                    //setAutocompleteData(data.response);
                },
                error: function (data, status, jqXHR) {
                    alert('There was an error.');
                    $("#updatebtn").prop("disabled", false);
                }
            }); // end $.ajax

jQuery এর কয়েকটি সংস্করণে আপনাকে অবশ্যই ব্যবহার করতে হবে .attr('disabled', true)। আমি জানি না, তবে আমি যে সংস্করণটি ব্যবহার করতে চাইছি (আমি যে অ্যাপ্লিকেশনটিতে কাজ করছি তার অংশ হিসাবে সংক্ষিপ্ত এবং বান্ডিল করা) এর সাথে object does not support prop
ছোঁড়াচ্ছে

2

এটি আমার পক্ষে কাজ করে:

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>

2

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

1. $ ('# পিএসএল 2। বিটিএন-চালিয়ে যান')। প্রপ ("অক্ষম", সত্য)

<a class=​"btn btn-yellow btn-continue" href=​"#">​Next​</a>

২. $ ('# পিএসএল 2। বিটিএন-চালিয়ে')

<a class=​"btn btn-yellow btn-continue" href=​"#" disabled=​"disabled">​Next​</a>

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