CODEWITHSUNDEEP
jqueryformsradio-button
Jacob Likecocain
Jacob Likecocain

Reputation: 103

Radio input that dosen't work for some reason with method on change

to be honest I found similar topics, but I couldn't find a right way to apply recommended solutions in my script, maybe I am a bit tired, my deep apologize for taking your time.

I want to disable adresInput if customer chooses radio1, and turn it back, if customer goes for radio2. Can you point, what is wrong with my script ? thank you !

SCRIPT:

$(document).ready(function(){
  radioA();
  $("#gridRadios1,#gridRadios2").change(radioA());
})
  }
function radioA(){
  radioG = $("#gridRadios1");
  adresInput = $("#validationCustom05");
  if(radioG.attr("checked")){adresInput.attr("disabled", "disabled")}else{adresInput.removeAttr("disabled")};
}

HTML:

  <div class="col-md-3 mb-3">
      <fieldset class="form-group">
    <legend class="col-form-label pt-0">I am from:</legend>
    <div class="col-sm-12">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
        <label class="form-check-label" for="gridRadios1">
          This city
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Out of the city
        </label>
      </div>
    </div>
</fieldset>
    </div>
    <div class="col-md-3 mb-3 disabled">
      <label for="validationCustom05">Address</label>
      <textarea rows="4" cols="50" class="form-control" id="validationCustom05" value="" required disabled>You address</textarea>
      <div class="invalid-feedback">
        Tell me your address!
      </div>
    </div>
  </div>

Upvotes: 0

Views: 53

Answers (2)

SMAKSS
SMAKSS

Reputation: 10520

Well, you can check for checked radio input with .is(':checked') selector. Also, please keep in mind to fill the input or textarea descriptions (e. g. You address or the correct one: Your address) with a placeholder instead of putting an actual value into them.

So a simpler version of your code (With a conditional (ternary) operator ?:) should be like this:

var radioG = $("#gridRadios1");
var adresInput = $("#validationCustom05");

function radioA() {
  radioG.is(':checked') ?
    adresInput.attr("disabled", "disabled") :
    adresInput.removeAttr("disabled");
}

$(document).ready(function() {
  radioG.attr("checked", true);
  radioA();
})

$('input[name="gridRadios"]').change(radioA);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 mb-3">
  <fieldset class="form-group">
    <legend class="col-form-label pt-0">I am from:</legend>
    <div class="col-sm-12">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
        <label class="form-check-label" for="gridRadios1">
          This city
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Out of the city
        </label>
      </div>
    </div>
  </fieldset>
</div>
<div class="col-md-3 mb-3 disabled">
  <label for="validationCustom05">Address</label>
  <textarea rows="4" cols="50" class="form-control" id="validationCustom05" value="" placeholder="Your address" required disabled></textarea>
  <div class="invalid-feedback">
    Tell me your address!
  </div>
</div>
</div>

Upvotes: 1

sandip bharadva
sandip bharadva

Reputation: 646

is(':checked') is used to check if radio button is checked or not

$(function(){
  $('input[type="radio"]').click(function(){
    if ($('#gridRadios1').is(':checked'))
    {
      $("#validationCustom05").prop('disabled', true);
    }
    
    if ($('#gridRadios1').is(':checked'))
    {
      $("#validationCustom05").prop('disabled', false);
    }

  });
});

Upvotes: 1

Related Questions