Radio Buttons Change Checkbox

by mobilat

HTML

<form>


<fieldset>
        <legend>Colour</legend>

        <div class="form-group">

            <div class="radio-form-group">
              <input class="colour-1" id="colour-red" type="radio" name="colour" value="red">
              <label>red</label>
            </div>
          
            <div class="radio-form-group">
              <input class="colour-2" id="colour-green" type="radio" name="colour" value="green">
              <label>green</label>
            </div>
          
            <div class="radio-form-group">
              <input class="colour-3" id="colour-yellow" type="radio" name="colour" value="yellow">
              <label>yellow</label>
            </div>
          
        </div>
<hr>
        <div class="form-group">
          <label for="" class="radio-group-label">Fruits</label>
          
            <div class="radio-form-group">
              <input class="fruit-1" type="checkbox" disabled="disabled" name="apple" value="apple">
              <label>apple</label>
            </div>
          
            <div class="radio-form-group">
              <input class="fruit-2" type="checkbox" disabled="disabled" name="banana" value="banana">
              <label>banana</label>
            </div>
          
            <div class="radio-form-group">
              <input class="fruit-3" type="checkbox" disabled="disabled" name="peach" value="peach">
              <label>peach</label>
            </div>
          
            <div class="radio-form-group">
              <input class="fruit-4" type="checkbox" disabled="disabled" name="citron" value="citron">
              <label>citron</label>
            </div>
          
            <div class="radio-form-group">
              <input class="fruit-5" type="checkbox" disabled="disabled" name="mango" value="mango">
              <label>mango</label>
            </div>
          
        </div>

      </fieldset>
      
</form>

JavaScript

$(document).ready(function () {

      $('.colour-1').change(function() {
        $(".fruit-1").prop('disabled', function(i, v) { return !v; });
        $(".fruit-3").prop('disabled', function(i, v) { return !v; });
      });
      $('.colour-2').change(function() {
        $(".fruit-1").prop('disabled', function(i, v) { return !v; });
        $(".fruit-5").prop('disabled', function(i, v) { return !v; });
      });
      $('.colour-3').change(function() {
        $(".fruit-2").prop('disabled', function(i, v) { return !v; });
        $(".fruit-4").prop('disabled', function(i, v) { return !v; });
      });




})