Поменять значение disabled в input

211
20 января 2018, 02:04

Есть две радиокнопки:

<input type="radio" name="payment" value="nal" checked=""> Наличными<br>
<input type="radio" name="payment" value="beznal"> Безналичными<br>

Есть input:

<input type="text" class="form-control" name="bin" required disabled="">

Как сделать, чтобы при нажатии на radio «безналичными» атрибут инпута disabled отключался, и наоборот, чтобы включался при нажатии на radio «наличными»?

Answer 1

jQuery 1.6+

disabled — это не просто атрибут в HTML-коде, это специальное свойство у объекта HTMLInputElement, значение которого имеет тип Boolean, поэтому в jQuery его правильнее всего менять с помощью метода .prop():

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

jQuery 1.5 и более старые

В старых версиях .prop() отсутствует, так что придётся откатываться до .attr() (это некрасиво, но тем не менее тоже работает благодаря специальному костылю).

Включить disabled:

$("input").attr('disabled', 'disabled');

Выключить disabled:

$("input").removeAttr('disabled');

(использовать removeProp для ранее упомянутого специального свойства disabled нельзя!)

О том, что это некрасиво, говорит сама документация jQuery:

[As of jQuery 1.6, ], To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

В любой версии jQuery или совсем без него

Если любыми путями достать настоящий DOM-объект (HTMLInputElement), то можно просто взять и поменять у него свойство disabled без всяких jQuery (правда, это будет применимо только к одному элементу за раз, в то время как jQuery умеет переключать disabled сразу пачке элементов, но сейчас не об этом).

Например, если повесить на требуемый элемент обработчик какого-нибудь события (без bind), то значением this там будет DOM-элемент, и тогда:

this.disabled = true;

Или можно достать DOM-элемент из jQuery-объекта:

$('input')[0].disabled = true;

Выше был вольный перевод ответа с английского Stack Overflow с дополнениями. Если применить данные знания к вашей задаче, то получится как-то так:

$('input[name="payment"]').on('click', function(){ 
  $('input[name="bin"]').prop('disabled', $(this).val() != 'beznal'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" name="payment" value="nal" checked=""> Наличными<br> 
<input type="radio" name="payment" value="beznal"> Безналичными<br> 
 
<input type="text" class="form-control" name="bin" required disabled="">

Answer 2

Вот к примеру так. С помощью jquery

$('input[type=radio]').on('click',function(){ 
  if( $(this).val() == 'beznal' ){ 
    $('input[type=text]').removeAttr('disabled'); 
  } 
  else{ 
    $('input[type=text]').attr('disabled','disabled'); 
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="radio" name="payment" value="nal" checked=""> Наличными<br> 
<input type="radio" name="payment" value="beznal"> Безналичными<br> 
<input type="text" class="form-control" name="bin" required disabled="">

Answer 3

Можно так (c очисткой инпута, если вдруг снова выбран вариант "наличными")

$('[type="radio"]').click(function(){ 
   if($(this).val() == 'beznal') { 
      $('.form-control').attr('disabled', false); 
   } 
   else { 
      $('.form-control').attr('disabled', true); 
      $('.form-control').val(''); 
   } 
})
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
 
<input type="radio" name="payment" value="nal" checked=""> Наличными<br> 
<input type="radio" name="payment" value="beznal"> Безналичными<br> 
 
<input type="text" class="form-control" name="bin" required disabled="">

READ ALSO
Удалить БД из PostgreSQL через PHP

Удалить БД из PostgreSQL через PHP

Есть ли возможность написать скрипт на php который удалит PostgreSQL базу данных? Другими словами как написать DROP DATABASE [ IF EXISTS ] name из php?

213
Как узнать из какой строки и какого файла был вызван метод класса?

Как узнать из какой строки и какого файла был вызван метод класса?

Если вообще не хочется попу отрывать от стула, то

333
Запись не добавляется в базу MYSQL phpmyadmin xampp

Запись не добавляется в базу MYSQL phpmyadmin xampp

Не добавляется записи из формы в базу данных в mysql XAMPPОтправляется код без ошибки но phpmyadmin записей не показывает

209