JSFiddle - React, Tailwind, and code Playground

by rohan patil

HTML

<p class="contact">
<input type="radio" name="Plan" id="PlanA"value="A"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
</p>

<p class="contact">
<input type="radio" name="Plan" id="PlanB"value="B"><label for="PlanB"><span style="font-weight:bold">PlanB</span></label><br>
<input name="PlanB" type="hidden" value=0 />
</p>

<p class="contact">
 <input type="checkbox" name="AndroidApps" id="smartphone" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
 <input name="AndroidApps" type="hidden" value=0 />
</p>

<p class="contact">
<input type="checkbox" name="WebApps" id="mobweb" value=1><label for="WebApps"><span style="font-weight:bold">WebApps</span></label><br>
<input name="WebApps" type="hidden" value=0 />
            </p>

<p class="contact"><label for="SmartCard"><span style="font-weight:bold">SmartCard</span></label>
<input type="text" name="SmartCard"id="scard"disabled="disabled" required size="45"  >
</p>

<p class="contact"><label for="comment"><span style="font-weight:bold">EmailService</span></label>
<input type=email name="emailid"id="emailid"disabled="disabled" required size="45"  >
</p>

<p class="contact"><label for="comment"><span style="font-weight:bold">SmsService</span></label>

<input type=tel name="mobnum"id="mobnum"disabled="disabled"  required onKeyUp="isValidChar(this.value);" size="45">
</p>

JavaScript

$(document).ready(function(){
    $('#PlanA').on('click',function(e) {
         $('input:radio').not(this).attr('checked',false);
         $("#emailid").prop("disabled", $(this).is(':checked'));
         $("#mobnum").prop("disabled", $(this).is(':checked'));
         $("#scard").prop("disabled", !$(this).is(':checked'));
         $("#mobweb,#smartphone,#smartcard").prop("checked",this.checked);
    });

    $('#PlanB').on('click',function(e) {
          $('input:radio').not(this).attr('checked',false); 
          $("#emailid").prop("disabled", !$(this).is(':checked'));
          $("#mobnum").prop("disabled", !$(this).is(':checked'));
          $("#scard").prop("disabled", !$(this).is(':checked'));
          $("#mobweb,#smartphone,#smartcard,#email,#sms").prop("checked",this.checked);
    });
});