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 (deleteAttr ("вимкнено")) "вимкнено", а це не правильний підхід. Існує велика плутанина щодо атрибута проти властивості.

HTML

W3C "відключений" у <input type="button" disabled>розмітці називається булевим атрибутом .

HTML проти DOM

Цитата:

Власність знаходиться в DOM; атрибут знаходиться в HTML, який розбирається в DOM.

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

JQuery

Пов'язані:

Тим не менш, найважливіша концепція, яку слід пам’ятати про перевірений атрибут, - це те, що він не відповідає перевіреному властивості. Атрибут фактично відповідає властивості defaultChecked і повинен бути використаний тільки для установки початкового значення цього прапорця. Значення зареєстрованого атрибута не змінюється зі станом прапорця, тоді як властивість, що перевіряється, робить. Таким чином, сумісний з переглядачем браузер спосіб визначити, чи прапорець встановлений, - це використовувати властивість ...

Відповідне:

Властивості, як правило, впливають на динамічний стан елемента 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);
    });
});

Щоб видалити відключене використання атрибутів,

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

ось Live приклад

Для входу в форму:

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

Деякі пояснення:

У цьому коді ми додаємо подію клавіатури у форматі HTML і при кожному натисканні клавіші перевіряємо всі поля введення. Якщо принаймні одне поле введення у нас порожнє або містить лише символи пробілу, то ми присвоюємо справжнє значення відключеній змінній та відключіть кнопку подання.

Якщо вам потрібно відключити кнопку подання, поки всі заповнені поля введення не заповнені - замініть:

inputs.forEach(function(input, index) {

з:

required_inputs.forEach(function(input, index) {

де Require_inputs вже оголошено масив, що містить лише необхідні поля введення.

Ми можемо просто мати, якщо & else. Якщо припустимо, що ваш вхід порожній, ми можемо мати

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