jQuery অক্ষম / জমা বোতাম সক্ষম

Question

আমার এই এইচটিএমএল রয়েছে:

<input type="text" name="textField" />
<input type="submit" value="send" />

আমি কীভাবে এটি করতে পারি:

• পাঠ্য ক্ষেত্রটি খালি থাকলে জমাটি অক্ষম করা উচিত (অক্ষম = "অক্ষম")।
• অক্ষম বৈশিষ্ট্য অপসারণ করতে পাঠ্যের ক্ষেত্রে যখন কিছু টাইপ করা হয়।
• যদি পাঠ্য ক্ষেত্রটি আবার খালি হয়ে যায় (পাঠ্য মুছে ফেলা হয়) তবে সাবমিট বোতামটি আবার নিষ্ক্রিয় করা উচিত।

আমি এরকম কিছু চেষ্টা করেছি:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

… কিন্তু কাজ করে না। কোন ধারনা?

Comments

এটির মতো অপসারণ ('অক্ষম') ব্যবহার করবেন না। রাষ্ট্রটি টগল করতে প্রপ () ব্যবহার করুন। দেখুন আমার উত্তর অথবা সরকারী ডকুমেন্টেশন ।

— বেসিক 6

Answer 1

সমস্যাটি হ'ল পরিবর্তনের ইভেন্টটি তখনই জ্বলিত হয় যখন ফোকাসটি ইনপুট থেকে সরিয়ে নেওয়া হয় (উদাহরণস্বরূপ কেউ এর থেকে ইনপুট বা ট্যাবগুলি ক্লিক করে)। পরিবর্তে কীআপ ব্যবহার করার চেষ্টা করুন:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

Comments

ঠিক আছে, তবে সমস্যাটি হ'ল যখন আমি শেষ চিঠিটি মুছব তখন খালি ভালটি ক্যাপচার করতে এবং আমার বোতামটি অক্ষম করতে আরও একবার চাপতে হবে, কারণ যখন আমি ব্যাকস্পেসটি টিপব তখন আমার অক্ষরটি আমার ক্ষেত্রটি এখনও জনবহুল হয়ে শেষ অক্ষরটি মুছে ফেলতে পারে, তাই আমার কীপ্রেস ক্যাপচার করা হয় এবং তারপরে চিঠিটি মুছে ফেলা হয়। সুতরাং ... আমি কিভাবে এটি সঠিকভাবে করা উচিত?

— কুমুনকি

ওহ, কোডটি প্রথমে পরীক্ষা না করায় আমার ক্ষমা চাই। যদি আপনি কীপ্রেসের সাথে কীপ্রেস প্রতিস্থাপন করেন তবে এটি কী সহায়তা করে?

— এরিক পালকোভিচ ক্যার

কী-বোর্ড ব্যবহার না করে আপনি যদি ক্ষেত্রের মান পরিবর্তন করেন?

— নাথান

এটি কাজ করে, তবে মনে হয় CSS ছাড়বে না। উদাহরণস্বরূপ, কল করে $ ("# loginButton")। বোতাম (); অন input id="loginButton" type="submit" name="Submit" value="Login" disabled>সিএসএস অক্ষম শ্রেণীর সাথে একটি অক্ষম বোতাম প্রদর্শন করবে।

— গা

প্রোপ ('অক্ষম', সত্য) পদ্ধতিটি অ্যাটর্কের ("অক্ষম", 'অক্ষম') পদ্ধতিতে ব্যবহার করা উচিত পদ্ধতিটি প্রপ ()

— মার্টিন

Answer 2

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

Comments

হ্যাঁ এটি কাজ করে! তবে..একটি প্রশ্ন যদিও ... আপনি এটি ব্যাখ্যা করতে পারেন: $ (": পাঠ্য") ke ধন্যবাদ

— কামুনকি

এইটির সাথে সমস্যাটি হ'ল ব্যাকস্পেস বা মুছুন কীগুলি টিপলে jQuery এর কীপ্রেস ইভেন্টটি নিয়মিত আগুন দেয় না। এর অর্থ হল যে ব্যবহারকারী পাঠ্যটি ব্যাকআপ করতে পারবেন এবং ফাংশনটি কল হবে না যা একটি ইউএক্স ব্যর্থ। বেশিরভাগ লোকেরা যে উপায়টি ব্যবহার করছেন এটি হিসাবে আমি কীআপটি দেখছি। আমি এটি বেশ পছন্দ করি না; আমি চাইছি কীডাউনে প্রতিক্রিয়াটি ঘটুক তবে এটি বন্ধ করা কিছুটা কঠিন।

— ববরোডস

Answer 3

এই প্রশ্নটি 2 বছরের পুরানো তবে এটি এখনও একটি ভাল প্রশ্ন এবং এটি প্রথম গুগলের ফলাফল ছিল ... তবে বিদ্যমান সমস্ত উত্তরই এইচটিএমএল বৈশিষ্ট্য নির্ধারণ এবং মুছে ফেলার প্রস্তাব দেয় ( মুছে ফেলুন ("অক্ষম")) "অক্ষম", যা নয় সঠিক পন্থা বৈশিষ্ট্য বনাম সম্পত্তি সম্পর্কে অনেক বিভ্রান্তি রয়েছে।

এইচটিএমএল

<input type="button" disabled>মার্কআপে থাকা "অক্ষম" কে ডাব্লু 3 সি দ্বারা একটি বুলিয়ান অ্যাট্রিবিউট বলা হয় ।

এইচটিএমএল বনাম ডিওএম

উদ্ধৃতি:

একটি সম্পত্তি ডিওমে আছে; একটি বৈশিষ্ট্যটি এইচটিএমএলতে থাকে যা ডিওমে বিভক্ত হয়।

https://stackoverflow.com/a/7572855/664132

JQuery

সম্পর্কিত:

তবুও, চেক করা গুণাবলী সম্পর্কে মনে রাখা সবচেয়ে গুরুত্বপূর্ণ ধারণাটি হ'ল এটি চেক করা সম্পত্তির সাথে মিল নয়। অ্যাট্রিবিউট আসলে defaultChecked সম্পত্তি অনুরূপ এবং কেবলমাত্র প্রারম্ভিক মান সেট ব্যবহার করা উচিত চেকবক্সটি করুন। চেক করা বৈশিষ্ট্যের মান চেকবাক্সের অবস্থার সাথে পরিবর্তিত হয় না, যখন পরীক্ষিত সম্পত্তিটি করে। সুতরাং, একটি চেকবক্স চেক করা হয়েছে কিনা তা নির্ধারণের ক্রস ব্রাউজার-সামঞ্জস্যপূর্ণ উপায় হ'ল সম্পত্তিটি ব্যবহার করা ...

প্রাসঙ্গিক:

বৈশিষ্ট্যগুলি সিরিয়ালযুক্ত এইচটিএমএল বৈশিষ্ট্যটি পরিবর্তন না করে সাধারণত কোনও ডোম উপাদানটির গতিশীল স্থিতিকে প্রভাবিত করে। উদাহরণগুলির মধ্যে ইনপুট উপাদানগুলির মান সম্পত্তি, ইনপুট এবং বোতামগুলির অক্ষম সম্পত্তি বা একটি চেকবাক্সের চেক করা সম্পত্তি অন্তর্ভুক্ত। .Prop () পদ্ধতিটি .attr () পদ্ধতির পরিবর্তে অক্ষম এবং চেক করা সেট করতে ব্যবহার করা উচিত।

$( "input" ).prop( "disabled", false );

সারসংক্ষেপ

[...] ফর্ম উপাদানগুলির [...] অক্ষম রাষ্ট্রের মতো ডোম বৈশিষ্ট্যগুলি পরিবর্তন করতে .prop () পদ্ধতিটি ব্যবহার করুন ।

( http://api.jquery.com/attr/ )

---

প্রশ্নের অংশ হিসাবে অক্ষম হিসাবে: এখানে "ইনপুট" নামে একটি ইভেন্ট রয়েছে, তবে ব্রাউজার সমর্থন সীমাবদ্ধ এবং এটি কোনও জিকুয়ের ইভেন্ট নয়, তাই jQuery এটিকে কাজ করবে না। পরিবর্তন ইভেন্টটি নির্ভরযোগ্যভাবে কাজ করে, তবে যখন উপাদান ফোকাস হারিয়ে ফেলে তখন তা বরখাস্ত করা হয়। সুতরাং কেউ দুজনকে একত্রিত করতে পারে (কিছু লোক কীপ এবং পেস্টের জন্যও শোনেন)।

আমি কী বলতে চাইছি তা দেখানোর জন্য এখানে কোডের একটি অনির্ধারিত অংশ রয়েছে:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

Comments

এই তথ্যের জন্য ধন্যবাদ, তবে এটি প্রকৃতপক্ষে বলা হয় না যদি অ্যাট্রিবিউটটি ব্যবহার করা কোনও সমস্যার কারণ হতে পারে, যেমন ক্রস ব্রাউজার-সামঞ্জস্যের ক্ষতি। অ্যাট্রিবিউটটি ব্যবহার করা আসলে কোনও সমস্যার কারণ হতে পারে?

— ক্রিসজেজে

উত্সাহিত, তবে আমি ক্রিসিজেজে যেমন উল্লেখ করেছেন তেমন নির্দিষ্ট ক্ষেত্রেও জানতে আগ্রহী যেখানে বৈশিষ্ট্যগুলি ইস্যুগুলিতে সরিয়ে নিয়ে যায়।

— আর্মফুট

Answer 4

অক্ষম বৈশিষ্ট্য ব্যবহার মুছে ফেলতে,

 $("#elementID").removeAttr('disabled');

এবং অক্ষম বৈশিষ্ট্য ব্যবহার যুক্ত করতে,

$("#elementID").prop("disabled", true);

উপভোগ করুন :)

Answer 5

বা আমাদের জন্য যা প্রতিটি ছোট জিনিসটির জন্য জিকিউ ব্যবহার করতে পছন্দ করে না:

document.getElementById("submitButtonId").disabled = true;

Comments

এটা যে আপনি একটি জাভাস্ক্রিপ্ট নিরামিষ এবং সবকিছু করছি দারুণ, কিন্তু আসলে এই প্রশ্নের উত্তর নেই এ সব ।

— মিশেল 14

25 টি উত্তর পেয়ে এই উত্তরটি সারা বিশ্বে অনেক ক্রেপি কোড ব্যাখ্যা করে: /

— o0 '।

Answer 6

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

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

Answer 7

এটি এর মতো কাজ করবে:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

আপনার এইচটিএমএলে একটি 'অক্ষম' বৈশিষ্ট্য রয়েছে তা নিশ্চিত করুন

Answer 8

ফাইল ইনপুট ক্ষেত্রের জন্য সমাধান এখানে ।

কোনও ফাইল চয়ন না করা হলে ফাইল ক্ষেত্রের জন্য জমা দেওয়ার বোতামটি অক্ষম করতে, ব্যবহারকারী আপলোড করার জন্য কোনও ফাইল চয়ন করার পরে সক্ষম করুন:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

এইচটিএমএল:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

Answer 9

আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন:

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

এখানে লাইভ উদাহরণ

Comments

এটি আমার জন্য কাজ করে। আমি উপরেরগুলি পরীক্ষা করেছিলাম তবে তাদের সাথে কিছু সমস্যা ছিল। ধন্যবাদ সোনু!

— জিওকোড

Answer 10

ফর্ম লগইনের জন্য:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

Answer 11

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

$( ".selector" ).button( "refresh" );

Comments

@The_Black_Smurf আমি ভবিষ্যতে কাউকে সহায়তা করার ক্ষেত্রে এটি যুক্ত করেছি - এতে ক্ষতি কী?

— টম চেম্বারলাইন

কি দারুন. JQuery শোনার জন্য দুঃখিত স্বয়ংক্রিয় রিফ্রেশ এখানে কাজ করছে না। ধন্যবাদ!

— ক্রিসজেজে

Answer 12

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

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

Answer 13

ভ্যানিলা জেএস সলিউশন। এটি কেবল একটি ইনপুট নয় পুরো ফর্মের জন্য কাজ করে।

প্রশ্নে জাভাস্ক্রিপ্ট ট্যাগ নির্বাচন করা হয়েছে।

এইচটিএমএল ফর্ম:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })

<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

কিছু ব্যাখ্যা:

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

সমস্ত প্রয়োজনীয় ইনপুট ক্ষেত্রগুলি পূরণ না করা পর্যন্ত আপনাকে যদি সাবমিট বাটনটি অক্ষম করতে হয় - প্রতিস্থাপন করুন:

inputs.forEach(function(input, index) {

সঙ্গে:

required_inputs.forEach(function(input, index) {

যেখানে প্রয়োজনীয়_ইনপুটগুলি ইতিমধ্যে কেবল প্রয়োজনীয় ইনপুট ক্ষেত্রগুলি সমন্বিত অ্যারে হিসাবে ঘোষিত হয়।

Answer 14

যদি আমরা মনে করি আপনার ইনপুটটি খালি থাকে তবে আমাদের কাছে কেবল ও থাকতে পারে

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

অন্যথায় আমরা মিথ্যাটিকে সত্যে পরিবর্তন করতে পারি

Answer 15

অক্ষম করুন: $('input[type="submit"]').prop('disabled', true);

সক্ষম করুন: $('input[type="submit"]').removeAttr('disabled');

উপরের সক্ষম কোডটি আরও সঠিক:

$('input[type="submit"]').removeAttr('disabled');

আপনি উভয় পদ্ধতি ব্যবহার করতে পারেন।

Comments

স্রেফ .prop ('অক্ষম', মিথ্যা) ব্যবহার সক্ষম করার জন্য;

— রহিম.নাগরি

Answer 16

আমার ব্যবহারের ক্ষেত্রে এটি ফিট করতে আমাকে কিছুটা কাজ করতে হয়েছিল।

আমার একটি ফর্ম রয়েছে যেখানে জমা দেওয়ার আগে সমস্ত ক্ষেত্রে অবশ্যই একটি মান থাকতে হবে।

আমি যা করেছি তা এখানে:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

তাদের উত্তরের জন্য এখানে সবাইকে ধন্যবাদ।

Answer 17

জমা বোতামটি সক্ষম বা অক্ষম করতে দয়া করে নীচের কোডটি দেখুন

যদি নাম এবং শহরের ক্ষেত্রগুলির মান থাকে তবে কেবল জমা দেওয়ার বোতামটি সক্ষম হবে।

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>

<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>

Comments

কেবল বাছাই করার জন্য, আপনি কী বাটনটি সক্রিয় করার আগে ২ য় চরিত্রের (কমপক্ষে) অপেক্ষা করা উচিত নয়? ;-)

— ক্রিস পিঙ্ক

Answer 18

আমার প্রকল্প থেকে এই স্নিপেট দেখুন

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

সুতরাং আপনার অপারেশন কার্যকর হওয়ার পরে কেবল বোতামটি অক্ষম করুন

$(this).attr('disabled', 'disabled');

Answer 19

সব ধরণের সমাধান সরবরাহ করা হয়। তাই আমি একটি ভিন্ন সমাধানের জন্য চেষ্টা করতে চাই। আপনি যদি idআপনার ইনপুট ক্ষেত্রে কোনও বৈশিষ্ট্য যুক্ত করেন তবে এটি আরও সহজ হবে easy

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

এখন এখানে আপনার jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

Answer 20

আমি আশা করি নীচের কোডটি কাউকে সাহায্য করবে .. !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/