jQuery ปิดการใช้งาน / เปิดใช้งานปุ่มส่ง

ฉันมี HTML นี้:

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

ฉันจะทำสิ่งนี้ได้อย่างไร:

• เมื่อช่องข้อความว่างเปล่าการส่งควรปิดใช้งาน (disabled = "disabled")
• เมื่อสิ่งที่พิมพ์ในช่องข้อความเพื่อลบคุณลักษณะปิดการใช้งาน
• หากช่องข้อความว่างเปล่าอีกครั้ง (ข้อความถูกลบ) ปุ่มส่งควรปิดการใช้งานอีกครั้ง

ฉันลองทำสิ่งนี้:

$(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"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

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

คำถามนี้มีอายุ 2 ปี แต่ยังคงเป็นคำถามที่ดีและเป็นผลลัพธ์แรกของ Google ... แต่คำตอบที่มีอยู่ทั้งหมดแนะนำให้ตั้งค่าและลบแอตทริบิวต์ HTML (removeAttr ("disabled")) "disabled" ซึ่งไม่ใช่ แนวทางที่ถูกต้อง มีความสับสนมากมายเกี่ยวกับคุณสมบัติและคุณสมบัติ

HTML

"ความพิการ" ใน<input type="button" disabled>ในมาร์กอัปที่เรียกว่าแอตทริบิวต์แบบบูลโดยของ W3C

HTML กับ DOM

อ้างถึง:

สถานที่ให้บริการอยู่ใน DOM; แอตทริบิวต์อยู่ใน HTML ที่วิเคราะห์คำใน DOM

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

JQuery

ที่เกี่ยวข้อง:

อย่างไรก็ตามแนวคิดที่สำคัญที่สุดที่ต้องจำเกี่ยวกับคุณสมบัติที่ตรวจสอบคือมันไม่สอดคล้องกับคุณสมบัติที่ตรวจสอบ แอตทริบิวต์จริงสอดคล้องกับ defaultChecked ทรัพย์สินและควรใช้เฉพาะในการตั้งค่าเริ่มต้นของช่อง ค่าแอททริบิวที่ทำเครื่องหมายไว้จะไม่เปลี่ยนแปลงตามสถานะของช่องทำเครื่องหมายในขณะที่คุณสมบัติที่เลือกทำอยู่ ดังนั้นวิธีที่เข้ากันได้ข้ามเบราว์เซอร์เพื่อตรวจสอบว่ามีการทำเครื่องหมายในช่องทำเครื่องหมายคือใช้คุณสมบัติ ...

ที่เกี่ยวข้อง:

โดยทั่วไปคุณสมบัติจะมีผลต่อสถานะไดนามิกขององค์ประกอบ DOM โดยไม่เปลี่ยนแอตทริบิวต์ HTML ที่ทำให้เป็นอนุกรม ตัวอย่างรวมถึงคุณสมบัติค่าขององค์ประกอบอินพุตคุณสมบัติปิดใช้งานของอินพุตและปุ่มหรือคุณสมบัติที่ตรวจสอบของช่องทำเครื่องหมาย ควรใช้เมธอด .prop () เพื่อตั้งค่าปิดใช้งานและตรวจสอบแทนเมธอด. atr ()

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

หากต้องการลบการใช้คุณสมบัติที่ถูกปิดใช้งาน

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

และเพื่อเพิ่มการใช้คุณลักษณะที่ปิดใช้งาน

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

สนุก :)

หรือสำหรับเราที่ไม่ต้องการใช้ jQ สำหรับทุกสิ่ง:

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

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

มันจะทำงานเช่นนี้:

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

ตรวจสอบให้แน่ใจว่ามีแอตทริบิวต์ "ปิดใช้งาน" ใน HTML ของคุณ

นี่คือทางออกสำหรับช่องใส่ไฟล์

หากต้องการปิดใช้งานปุ่มส่งสำหรับฟิลด์ไฟล์เมื่อไม่ได้เลือกไฟล์จากนั้นเปิดใช้งานหลังจากผู้ใช้เลือกไฟล์ที่จะอัปโหลด:

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

Html:

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

นี่คือตัวอย่างสด

สำหรับการลงชื่อเข้าใช้แบบฟอร์ม:

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

หากปุ่มนั้นเป็นปุ่มสไตล์ jQuery (ด้วย .button ()) คุณจะต้องรีเฟรชสถานะของปุ่มเพื่อให้คลาสเพิ่ม / ลบคลาสที่ถูกต้องเมื่อคุณลบหรือเพิ่มแอททริบิวต์ที่ถูกปิดใช้งาน

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

คำตอบข้างต้นไม่ได้เน้นที่การตรวจสอบว่ามีการตัด / วางเหตุการณ์ตามเมนู ด้านล่างนี้เป็นรหัสที่ฉันใช้ทำทั้งสองอย่าง สังเกตการกระทำที่เกิดขึ้นจริงด้วยการหมดเวลาเนื่องจากเหตุการณ์ที่เกิดขึ้นจริงและเหตุการณ์ที่ผ่านมาเกิดขึ้นก่อนที่การเปลี่ยนแปลงจะเกิดขึ้นดังนั้นการหมดเวลาให้เวลาเล็กน้อยเพื่อให้เกิดเหตุการณ์

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

โซลูชั่นวานิลลา JS มันใช้งานได้กับทั้งฟอร์มไม่เพียงอินพุตเดียว

ในแท็ก JavaScript ที่เลือกคำถาม

แบบฟอร์ม HTML:

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>

คำอธิบายบางอย่าง:

ในรหัสนี้เราเพิ่มเหตุการณ์ keyup ในรูปแบบ html และในทุก ๆ ปุ่มกดตรวจสอบช่องใส่ทั้งหมด หากฟิลด์อินพุตอย่างน้อยหนึ่งฟิลด์ที่เรามีนั้นว่างเปล่าหรือมีอักขระเว้นวรรคเท่านั้นเราจะกำหนดค่าจริงให้กับตัวแปรที่ปิดใช้งานและปุ่มส่งปิดการใช้งาน

หากคุณจำเป็นต้องปิดการใช้งานปุ่มส่งจนกว่าช่องป้อนข้อมูลที่จำเป็นทั้งหมดจะถูกกรอก - แทนที่:

inputs.forEach(function(input, index) {

ด้วย:

required_inputs.forEach(function(input, index) {

โดยที่ required_inputs มีการประกาศอาร์เรย์ที่มีฟิลด์อินพุตที่จำเป็นเท่านั้น

เราสามารถมีได้หาก & ถ้าคุณคิดว่าข้อมูลของคุณว่างเปล่าเราสามารถมี

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

มิฉะนั้นเราสามารถเปลี่ยน false ให้เป็นจริงได้

ปิดการใช้งาน: $('input[type="submit"]').prop('disabled', true);

เปิดใช้งาน: $('input[type="submit"]').removeAttr('disabled');

รหัสเปิดใช้งานด้านบนมีความแม่นยำมากกว่า:

$('input[type="submit"]').removeAttr('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);
       });
  });

ขอบคุณทุกคนสำหรับคำตอบของพวกเขาที่นี่

โปรดดูรหัสด้านล่างเพื่อเปิดหรือปิดการใช้งานปุ่มส่ง

หากฟิลด์ชื่อและเมืองมีค่าจะมีการเปิดใช้งานปุ่มส่งเท่านั้น

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

ดูตัวอย่างนี้จากโครงการของฉัน

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

มีการแก้ปัญหาประเภทอัล ดังนั้นฉันต้องการลองวิธีอื่น มันจะง่ายขึ้นหากคุณเพิ่มแอidททริบิวในฟิลด์อินพุตของคุณ

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

ฉันหวังว่ารหัสด้านล่างจะช่วยให้ใครบางคน .. !!! :)

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