title: disable input fields on radio button change
body: <p>I have four radio buttons (fixed,percentage,monthly,yearly), I created A div with five fields, start price, end price, start date, end date and amount. What I want is when clicked on fixed or percentage button all five fields should be enabled and when clicked on monthly or yearly button start price and end price fields should be disabled (as I don't want to pass the values of these fields). I also have a add more mutton need to do the same for it i.e when add more rows to fixed/percentage all fields should be enabled and while adding rows to monthly/yerly fields, start/end price fields should be disabled. Thanks in advance. </p>
  
  <p>HTML code for labels</p>
  
  <pre><code>&lt;label class="col-sm-2 control-label" for="radioo"&gt;Commission type &lt;b style="color:red;"&gt;*&lt;/b&gt;&lt;/label&gt;
           &lt;div class="col-lg-10" required&gt;
             &lt;label class="custom-control custom-control-primary custom-radio"&gt;
               &lt;input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked"&gt;
               &lt;span class="custom-control-indicator"&gt;&lt;/span&gt;
               &lt;span class="custom-control-label"&gt;Fixed price&lt;/span&gt;
             &lt;/label&gt;
             &lt;label class="custom-control custom-control-primary custom-radio"&gt;
               &lt;input class="custom-control-input" type="radio" name="comission_type" value="1"&gt;
               &lt;span class="custom-control-indicator"&gt;&lt;/span&gt;
               &lt;span class="custom-control-label"&gt;Percentage wise&lt;/span&gt;
             &lt;/label&gt;
             &lt;label class="custom-control custom-control-primary custom-radio"&gt;
               &lt;input class="custom-control-input" type="radio" name="comission_type" value="2"&gt;
               &lt;span class="custom-control-indicator"&gt;&lt;/span&gt;
               &lt;span class="custom-control-label"&gt;Monthly&lt;/span&gt;
             &lt;/label&gt;
             &lt;label class="custom-control custom-control-primary custom-radio"&gt;
               &lt;input class="custom-control-input" type="radio" name="comission_type" value="3"&gt;
               &lt;span class="custom-control-indicator"&gt;&lt;/span&gt;
               &lt;span class="custom-control-label"&gt;Yearly&lt;/span&gt;
             &lt;/label&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>HTML code for div</p>
  
  <pre><code>&lt;div id="fixPerDiv" style="display:block;"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="col-lg-11 col-lg-offset-1"&gt;
            &lt;div class="table-responsive"&gt;
            &lt;table class="table" id = 'commision_tbl' &gt;
            &lt;tr&gt;
                &lt;td width = '20%'&gt;Start price&lt;/td&gt;
                &lt;td width = '20%'&gt;End price&lt;/td&gt;
                &lt;td width = '20%'&gt;Start date&lt;/td&gt;
                &lt;td width = '20%'&gt;End date&lt;/td&gt;
                &lt;td width = '20%'&gt;Comission&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td&gt;&lt;input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="input-with-icon"&gt;&lt;input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/&gt;&lt;span class="icon icon-calendar input-icon"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="input-with-icon"&gt;&lt;input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/&gt;&lt;span class="icon icon-calendar input-icon"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="number" name="commissions_amount[]" class="form-control"  value="" placeholder="Commision price" required="required"/&gt;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
                  &lt;td colspan="6" align = "center"&gt;
                      &lt;input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info"&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Script code for disabling two fields for monthly/yearly radio buttons (Incomplete)</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
    console.log('called');
     $('input[type=radio][name=comission_type]').change(function() {
         if (this.value == '0' || this.value == '1') {
  
  
           $("#fixPerDiv").css("display","block");
  
  
         }
         else if (this.value == '2' || this.value == '3') {
  
  
             $("#fixPerDiv").css("display","block");
  
         }
     });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Script for add button</p>
  
  <pre><code>&lt;script&gt;
  $('#price_addmorebtn').click(function(){
       var tr = "&lt;tr&gt;";
       tr += "&lt;td&gt;&lt;input type=\"number\" name=\"commissions_start_price[]\" class=\"form-control\"  placeholder=\"Start Price\"  required /&gt;&lt;/td&gt;";
       tr += "&lt;td&gt;&lt;input type=\"number\" name=\"commissions_end_price[]\" class=\"form-control\"  placeholder=\"End Price\" required /&gt;&lt;/td&gt;";
       tr += "&lt;td&gt;&lt;div class=\"input-with-icon\"&gt;&lt;input name=\"start_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control\" required /&gt;&lt;span class=\"icon icon-calendar input-icon\"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";
       tr += "&lt;td&gt;&lt;div class=\"input-with-icon\"&gt;&lt;input name=\"end_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control\" required /&gt;&lt;span class=\"icon icon-calendar input-icon\"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";
       tr += "&lt;td&gt;&lt;input type=\"number\" name=\"commissions_amount[]\" class=\"form-control\" placeholder=\"Commision price\" required /&gt;&lt;/td&gt;";
       tr += "&lt;td&gt;&lt;span class = 'romoverow icon icon-close' style=\"cursor:pointer; padding-top:12px;\" title=\"Click to remove this row.\"&gt;&lt;/span&gt;&lt;/td&gt;";
       $('#commision_tbl tr:last').before(tr);
   });
   $(document).on('click','.romoverow',function(){
       //alert('Hello');
        $(this).closest( 'tr').remove();
   });
  </code></pre>
  
  <p></p>