Help me please. How can I make all fields inactive by clicking on a rudiobutton, i.e. so that it was impossible to enter the text. I would like to execute it on JS or 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>

2 answers 2

Use the id search and the disabled property. I recommend replacing the radiobutton with a checkbox, since the radiobutton cannot be removed (in case the user changes his mind).

 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>

  • and remove as then? only one side works - user33274
  • Thank! One more thing. This button will be checked by default. Is it possible to make the fields so default? Those. there will be two radio buttons: one locks the fields, the other unlocks. - Viking777
  • one
    @ Viking777, added a second radiobutton, which removes the value. By default, all fields are set to disabled. - Sergey Glazirin

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