javascript - validator - validation js




jQuery تعطيل/تمكين زر الإرسال (12)

لدي هذا html:

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

... لكنه لا يعمل. أيه أفكار؟ شكر.


eric ، يبدو أن شفرتك لا تعمل بالنسبة لي عندما يدخل المستخدم النص ثم يحذف كل النص. أنا خلقت نسخة أخرى إذا واجه أي شخص نفس المشكلة. هنا يا يذهب الناس:

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

أو بالنسبة لنا لا نرغب في استخدام jQ لكل شيء صغير:

document.getElementById("submitButtonId").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);
       });
  });

شكرا للجميع على إجاباتهم هنا.


سوف يعمل مثل هذا:

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

تأكد من وجود سمة "معطلة" في HTML الخاص بك


لإزالة استخدام السمة المعوقين ،

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

ولإضافة استخدام سمة معطلة ،

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

استمتع :)


هذا السؤال بعمر سنتين لكنه ما زال سؤالًا جيدًا وكانت هذه أول نتيجة لـ Google ... ولكن جميع الإجابات الحالية توصي بإعداد وإزالة سمة HTML (removeAttr ("disabled")) "disabled" ، وهي ليست النهج الصحيح. هناك الكثير من الارتباك بخصوص الخاصية المميزة مقابل الخاصية.

HTML

ويسمى "المعوقين" في <input type="button" disabled> في الترميز " السمة المنطقية" بواسطة W3C .

HTML مقابل DOM

اقتبس:

خاصية في DOM ؛ توجد سمة في HTML يتم تحليلها في DOM.

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

مسج

ذات صلة:

ومع ذلك ، فإن أهم مفهوم يجب تذكره حول السمة المحددة هو أنه لا يتوافق مع الخاصية المحددة. تتوافق السمة فعليًا مع الخاصية المفحوصة الافتراضية ، ويجب استخدامها فقط لتعيين القيمة الأولية لمربع الاختيار. لا تتغير قيمة السمة المحددة مع حالة مربع الاختيار ، بينما الخاصية المميزة محددة. لذلك ، فإن الطريقة المتوافقة مع المتصفحات لتحديد ما إذا كان مربع الاختيار محددًا هو استخدام الخاصية ...

ذو صلة:

تؤثر الخصائص بشكل عام على الحالة الديناميكية لعنصر DOM بدون تغيير سمة HTML المتسلسلة. تتضمن الأمثلة خاصية القيمة لعناصر الإدخال ، أو الخاصية المعطلة للمدخلات والأزرار ، أو الخاصية المحددة لمربع الاختيار. يجب استخدام الأسلوب .prop () لتعيين تعطيل وفحص بدلاً من طريقة .attr ().

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

ملخص

إلى [...] تغيير خصائص DOM مثل […] حالة تعطيل عناصر النموذج ، استخدم الأسلوب .prop () .

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

أما بالنسبة إلى تعطيل الجزء التغير من السؤال: هناك حدث يسمى "الإدخال" ، ولكن دعم المتصفح محدود ولا يعد أحد أحداث jQuery ، لذا لن يجعله 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);
    });
});

هنا هو الحل لمجال إدخال الملف .

لتعطيل زر إرسال لحقل الملف عندما لا يتم اختيار ملف ، ثم تمكين بعد أن يختار المستخدم ملفًا لتحميله:

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

يمكنك أيضًا استخدام شيء كهذا:

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

هنا مثال حي


يمكننا ببساطة إذا كان & وإلا. إذا افترض أن مدخلاتك فارغة يمكننا الحصول عليها

  if($(#name).val() != '') {
                $('input[type="submit"]').attr('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>


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




forms