По клику сделать неактивные поля

230
05 мая 2018, 13:23

Помогите пожалуйста. Как можно по клику на rudiobutton сделать все поля неактивными, т.е. чтобы туда нельзя было ввести текст. Хотелось бы на JS или jQuery это исполнить

<input id="free-pickup-radio" type="radio" name="ship_to_different_address"/> 
			<label for="free-pickup-radio" class="checkbox">Самовывоз?</label> 
 
<div class="shipping_address" style="display: block;"> 
			 
<p class="form-row form-row-wide address-field form-group" id="shipping_address_1_field" data-priority=""><label for="shipping_address_1" class="hidden">Адрес</label><input type="text" class="input-text form-control" name="shipping_address_1" id="shipping_address_1" placeholder="Адрес" value=""></p> 
			 
				 
<p class="form-row form-row-wide address-field form-group" id="shipping_city_field" data-priority=""><label for="shipping_city" class="hidden">Населённый пункт</label><input type="text" class="input-text form-control" name="shipping_city" id="shipping_city" placeholder="Населённый пункт" value=""></p> 
			 
				 
<p class="form-row form-row-wide address-field form-group" id="shipping_state_field" data-priority=""><label for="shipping_state" class="hidden">Область/регион</label><input type="text" class="input-text form-control" value="" placeholder="Область/регион" name="shipping_state" id="shipping_state"></p> 
			 
				 
<p class="form-row form-row-wide address-field form-group" id="shipping_postcode_field" data-priority=""><label for="shipping_postcode" class="hidden">Почтовый индекс</label><input type="text" class="input-text form-control" name="shipping_postcode" id="shipping_postcode" placeholder="Почтовый индекс" value=""></p>	 
</div>

Answer 1

Используйте поиск по id и свойство disabled. Рекомендую заменить radiobutton на checkbox, так как radiobutton нельзя снять (на случай, если пользователь передумал).

let inputDisable = function(value) { 
  document.getElementById('shipping_address_1').disabled = value; 
  document.getElementById('shipping_city').disabled = value; 
  document.getElementById('shipping_state').disabled = value; 
  document.getElementById('shipping_postcode').disabled = value; 
}
<input id="free-pickup-radio" type="radio" name="ship_to_different_address" onchange="inputDisable(true)" checked/> 
<label for="free-pickup-radio" class="checkbox">Самовывоз?</label> 
<input id="free-pickup-radio" type="radio" name="ship_to_different_address" onchange="inputDisable(false)" /> 
<label for="free-pickup-radio" class="checkbox">Не самомывоз</label> 
 
<div class="shipping_address" style="display: block;"> 
  <p class="form-row form-row-wide address-field form-group" id="shipping_address_1_field" data-priority=""> 
    <label for="shipping_address_1" class="hidden">Адрес</label> 
    <input type="text" class="input-text form-control" name="shipping_address_1" id="shipping_address_1" placeholder="Адрес" value="" disabled="true"> 
  </p> 
 
  <p class="form-row form-row-wide address-field form-group" id="shipping_city_field" data-priority=""> 
    <label for="shipping_city" class="hidden">Населённый пункт</label> 
    <input type="text" class="input-text form-control" name="shipping_city" id="shipping_city" placeholder="Населённый пункт" value="" disabled="true"> 
  </p> 
 
  <p class="form-row form-row-wide address-field form-group" id="shipping_state_field" data-priority=""> 
    <label for="shipping_state" class="hidden">Область/регион</label> 
    <input type="text" class="input-text form-control" value="" placeholder="Область/регион" name="shipping_state" id="shipping_state" disabled="true"> 
  </p> 
 
  <p class="form-row form-row-wide address-field form-group" id="shipping_postcode_field" data-priority=""> 
    <label for="shipping_postcode" class="hidden">Почтовый индекс</label> 
    <input type="text" class="input-text form-control" name="shipping_postcode" id="shipping_postcode" placeholder="Почтовый индекс" value="" disabled="true"> 
  </p> 
</div>

Answer 2

$(document).on('change', 'input[name="ship_to_different_address"]', function() { 
  if ($(this).val() == 'not') { 
    $('.shipping_address input').prop('disabled', true); 
  } else { 
    $('.shipping_address input').prop('disabled', false); 
  } 
});
label { 
  display: block; 
} 
 
#shipping_address { 
  display: block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
  <label for="without_delivery" class="checkbox"> 
    <input id="without_delivery" type="radio" name="ship_to_different_address" value="not" checked="" />Самовывоз? 
  </label> 
  <label for="delivery" class="checkbox"> 
    <input id="delivery" type="radio" name="ship_to_different_address" value="yep" />Доставка 
  </label> 
 
  <div class="shipping_address"> 
    <p class="form-row form-row-wide address-field form-group" id="shipping_address_1_field" data-priority=""> 
      <label for="shipping_address_1" class="hidden">Адрес</label> 
      <input type="text" class="input-text form-control" name="shipping_address_1" id="shipping_address_1" placeholder="Адрес" value="" disabled="true"> 
    </p> 
 
    <p class="form-row form-row-wide address-field form-group" id="shipping_city_field" data-priority=""> 
      <label for="shipping_city" class="hidden">Населённый пункт</label> 
      <input type="text" class="input-text form-control" name="shipping_city" id="shipping_city" placeholder="Населённый пункт" value="" disabled="true"> 
    </p> 
 
    <p class="form-row form-row-wide address-field form-group" id="shipping_state_field" data-priority=""> 
      <label for="shipping_state" class="hidden">Область/регион</label> 
      <input type="text" class="input-text form-control" value="" placeholder="Область/регион" name="shipping_state" id="shipping_state" disabled="true"> 
    </p> 
 
    <p class="form-row form-row-wide address-field form-group" id="shipping_postcode_field" data-priority=""> 
      <label for="shipping_postcode" class="hidden">Почтовый индекс</label> 
      <input type="text" class="input-text form-control" name="shipping_postcode" id="shipping_postcode" placeholder="Почтовый индекс" value="" disabled="true"> 
    </p> 
  </div> 
</form>

READ ALSO
Можно ли вкладывать блочные элементы в строчные?

Можно ли вкладывать блочные элементы в строчные?

Есть ли разница между <h2><a>content<a/></h2> и <a><h2>content</h2></a>

224
Как сделать такой блок адаптивным?

Как сделать такой блок адаптивным?

На одном сайте есть такой блок:

210
Парсинг html страницы в jQuery объект

Парсинг html страницы в jQuery объект

Имеется вся страница, начиная от <!DOCTYPE html>, заканчивая </html>Как мне эту строку распарсить в объект jQuery что бы у меня получился html?

222
Положение скролла страницы js

Положение скролла страницы js

Я хочу сделать так: 1js/jquery узнаёт позицию скролла страницы (пиксели сверху) 2

237