CODEWITHSUNDEEP
jqueryhtmlradio-button
RiotAct
RiotAct

Reputation: 773

jQuery, check radio button and mark others disabled

I am working on a custom form. There are 4 radio buttons at the top, one is marked checked by default. Based on those radio button values, other radio buttons will be available or not available in another part of the form. I am having one final issue: if someone checked a method field other than "default" and then checked a interval field other than "once" I want the method field to revert back to "default".

I know that .attr('checked', 'checked'); is the way to check a field but not sure how to best implement it with my code.

Here is an example:

<form>
  <p>
    <input type="radio" name="interval" value="once" checked> Once
    <input type="radio" name="interval" value="weekly"> Weekly
    <input type="radio" name="interval" value="bi-weekly"> Bi-Weekly
    <input type="radio" name="interval" value="monthly"> Monthly
  </p>

  <p>
    <input type="radio" name="method" value="default" checked> Default
    <input type="radio" class="extra" name="method" value="second"> Second
    <input type="radio" class="extra" name="method" value="third"> Third
  </p>
</form>

$(document).ready(function() {
    $("input:radio[name=interval]").on("change", function () {
    if ($(this).prop("checked") && $(this).val() == 'once') $('.extra').prop('disabled', false).show();
    else $(".extra").prop('disabled', true).hide();
  });
});

Here is a fiddle

Upvotes: 0

Views: 78

Answers (2)

Uttam Gupta
Uttam Gupta

Reputation: 518

you can use below code

    $(document).ready(function() {
        $("input:radio[name=interval]").on("change", function () {
        if ($(this).prop("checked") && $(this).val() != 'once') 
        {
           $('.extra').attr('disabled', false).show();
           $('input[value="default"]').prop('checked', true);
        }
        else $(".extra").attr('disabled', true).hide();
     });
  });

Upvotes: 0

Taplar
Taplar

Reputation: 24965

I added common classes to the methods and intervals. If the interval is changed from 'once' it will set the method back to default and enable the extras. If it is changed back to once, it will enable the methods.

$(document).ready(function() {
  var $intervals = $('.interval');
  var $methods = $('.method');

  $intervals.on('change', function() {
    if (this.value !== 'once') {
      $methods.not('.extra').prop('checked', true);
    }

    $methods.filter('.extra').prop('disabled', this.value !== 'once');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="radio" name="interval" class="interval" value="once" checked> Once
    <input type="radio" name="interval" class="interval" value="weekly"> Weekly
    <input type="radio" name="interval" class="interval" value="bi-weekly"> Bi-Weekly
    <input type="radio" name="interval" class="interval" value="monthly"> Monthly
  </p>

  <p>
    <input type="radio" class="method" name="method" value="default" checked> Default
    <input type="radio" class="method extra" name="method" value="second"> Second
    <input type="radio" class="method extra" name="method" value="third"> Third
  </p>
</form>

Upvotes: 1

Related Questions