samedi 9 décembre 2017

How to disable and put limits on checkboxes with radio button (Javascript)

I have a radio-type button and a few checkboxes. I basically want to disable the checkboxes when I choose Non-Exclusive then limit the checkboxes to 2 if I choose Package 1.

Here's my html code:

<label>
    <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive
    </label>
    <label>
    <input type="radio" value="package1" id="package1" name="packages"> Package 1
    </label>
    <label>
    <input type="radio" value="package2" id="package2" name="packages"> Package 2
    </label>
<br />
    <label><h2>Rice </h2></label>
    <br />
    <a style="color: darkred;">2 Choices</a>
    <br />
    <div class="checkboxfood">
      <label>
      <input type="checkbox" class="food" value=""> Plain Rice (Mandatory)
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Buttered Rice
      </label>
      <label>
      <input type="checkbox" class="food" value=""> Garlic Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Kimchi Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Adobo Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Yang Chow Rice
      </label>
    <br />
    <label>
      <input type="checkbox" class="food" value=""> Shanghai Rice
      </label>
    <label>
      <input type="checkbox" class="food" value=""> Bagoong Rice
      </label>
    </div>




Aucun commentaire:

Enregistrer un commentaire