javascript - jQuery নিষ্ক্রিয়/জমা বাটন সক্রিয় করুন




html forms (12)

অথবা আমাদের জন্য যা প্রতিটি সামান্য জিনিস জন্য jq ব্যবহার করতে চান না:

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

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

<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');
        }
    });
});

... কিন্তু এটা কাজ করে না। কোন ধারনা? ধন্যবাদ।


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

$(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);
        }
    });
});

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


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

 $("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');


আমি আমার ব্যবহার ক্ষেত্রে এই মাপসই করা একটি বিট কাজ ছিল।

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

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

  $(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);
       });
  });

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


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

এইচটিএমএল

মার্কআপে <input type="button" disabled> কে W3C দ্বারা বুলিয়ান বৈশিষ্ট্য বলা হয়

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

উক্তি:

একটি সম্পত্তি DOM হয়; একটি বৈশিষ্ট্য এইচটিএমএল হয় যে DOM মধ্যে বিশ্লেষণ করা হয়।

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

JQuery

সম্পর্কিত:

তবুও, চেক করা বৈশিষ্ট্য সম্পর্কে মনে রাখার সবচেয়ে গুরুত্বপূর্ণ ধারণা এটি চেক করা সম্পত্তিটির সাথে সম্পর্কিত নয়। বৈশিষ্ট্যটি প্রকৃতপক্ষে ডিফল্ট চেকযুক্ত সম্পত্তির সাথে সামঞ্জস্যপূর্ণ এবং চেকবক্সের প্রাথমিক মান সেট করতে ব্যবহার করা উচিত । চেক করা বৈশিষ্ট্য মান চেকবক্সের অবস্থা সঙ্গে পরিবর্তন করা হয় না, যখন চেক বৈশিষ্ট্য। অতএব, একটি চেকবক্স চেক করা হয় কিনা তা ক্রস ব্রাউজার-সামঞ্জস্যপূর্ণ উপায় সম্পত্তি ব্যবহার করা হয় ...

প্রাসঙ্গিক:

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

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

সারাংশ

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

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

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

এখানে আমি কী বোঝাতে চাচ্ছি তা কোডের একটি অনির্ধারিত অংশ:

$(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);
    });
});

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

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

$(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 %>

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

$('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');
    }
})

নিষ্ক্রিয় বৈশিষ্ট্য ব্যবহার করার জন্য,

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

এবং অক্ষম বৈশিষ্ট্য ব্যবহার যোগ করুন,

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

উপভোগ করুন :)


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

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

সমস্যাটি হল যে পরিবর্তন ইভেন্ট কেবলমাত্র ইনপুট থেকে সরানো হলে (যেমন ইনপুট বন্ধ করে বা ট্যাবগুলি বন্ধ করে) কেবলমাত্র তখনই আগুনে পুড়ে যায়। পরিবর্তে কীউপ ব্যবহার করে দেখুন:

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

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

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

<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>


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

<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);
        }
    });
});




forms