禁用单选按钮更改时的输入字段

时间:2017-02-11 05:27:04

标签: javascript php jquery html css

我有四个单选按钮(固定,百分比,月,年),我创建了一个包含五个字段的div,起始价格,结束价格,开始日期,结束日期和金额。我想要的是当点击固定或百分比按钮时,应启用所有五个字段,并且当点击每月或每年按钮时,应禁用开始价格和结束价格字段(因为我不想传递这些字段的值)。我还有一个添加更多的羊肉需要做同样的事情,即当添加更多行到固定/百分比所有字段应该启用,并在向每月/每年字段添加行时,应禁用开始/结束价格字段。提前致谢。

标签的HTML代码

<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
         <div class="col-lg-10" required>
           <label class="custom-control custom-control-primary custom-radio">
             <input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
             <span class="custom-control-indicator"></span>
             <span class="custom-control-label">Fixed price</span>
           </label>
           <label class="custom-control custom-control-primary custom-radio">
             <input class="custom-control-input" type="radio" name="comission_type" value="1">
             <span class="custom-control-indicator"></span>
             <span class="custom-control-label">Percentage wise</span>
           </label>
           <label class="custom-control custom-control-primary custom-radio">
             <input class="custom-control-input" type="radio" name="comission_type" value="2">
             <span class="custom-control-indicator"></span>
             <span class="custom-control-label">Monthly</span>
           </label>
           <label class="custom-control custom-control-primary custom-radio">
             <input class="custom-control-input" type="radio" name="comission_type" value="3">
             <span class="custom-control-indicator"></span>
             <span class="custom-control-label">Yearly</span>
           </label>
     </div>

div的HTML代码

<div id="fixPerDiv" style="display:block;">
      <div class="form-group">
        <div class="col-lg-11 col-lg-offset-1">
          <div class="table-responsive">
          <table class="table" id = 'commision_tbl' >
          <tr>
              <td width = '20%'>Start price</td>
              <td width = '20%'>End price</td>
              <td width = '20%'>Start date</td>
              <td width = '20%'>End date</td>
              <td width = '20%'>Comission</td>
              <td>&nbsp;</td>
          </tr>

          <tr>
            <td><input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /></td>
            <td><input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/></td>
            <td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
            <td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
            <td><input type="number" name="commissions_amount[]" class="form-control"  value="" placeholder="Commision price" required="required"/></td>
            <td>&nbsp;</td>
          </tr>

          <tr>
                <td colspan="6" align = "center">
                    <input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
                </td>
              </tr>
            </table>

                </div>
              </div>
            </div>
          </div>

用于禁用每月/每年单选按钮的两个字段的脚本代码(未完成)

<script>
$(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");

       }
   });
});
</script>

添加按钮的脚本

<script>
$('#price_addmorebtn').click(function(){
     var tr = "<tr>";
     tr += "<td><input type=\"number\" name=\"commissions_start_price[]\" class=\"form-control\"  placeholder=\"Start Price\"  required /></td>";
     tr += "<td><input type=\"number\" name=\"commissions_end_price[]\" class=\"form-control\"  placeholder=\"End Price\" required /></td>";
     tr += "<td><div class=\"input-with-icon\"><input name=\"start_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control\" required /><span class=\"icon icon-calendar input-icon\"></span></div></td>";
     tr += "<td><div class=\"input-with-icon\"><input name=\"end_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control\" required /><span class=\"icon icon-calendar input-icon\"></span></div></td>";
     tr += "<td><input type=\"number\" name=\"commissions_amount[]\" class=\"form-control\" placeholder=\"Commision price\" required /></td>";
     tr += "<td><span class = 'romoverow icon icon-close' style=\"cursor:pointer; padding-top:12px;\" title=\"Click to remove this row.\"></span></td>";
     $('#commision_tbl tr:last').before(tr);
 });
 $(document).on('click','.romoverow',function(){
     //alert('Hello');
      $(this).closest( 'tr').remove();
 });

1 个答案:

答案 0 :(得分:0)

试试这个:

div的HTML代码

<div id="fixPerDiv" style="display:block;">
      <div class="form-group">
        <div class="col-lg-11 col-lg-offset-1">
          <div class="table-responsive">
          <table class="table" id = 'commision_tbl' >
          <tr>
              <td width = '20%'>Start price</td>
              <td width = '20%'>End price</td>
              <td width = '20%'>Start date</td>
              <td width = '20%'>End date</td>
              <td width = '20%'>Comission</td>
              <td>&nbsp;</td>
          </tr>

          <tr>
            <td><input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /></td>
            <td><input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/></td>
            <td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control start_date" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
            <td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control end_date" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
            <td><input type="number" name="commissions_amount[]" class="form-control"  value="" placeholder="Commision price" required="required"/></td>
            <td>&nbsp;</td>
          </tr>

          <tr>
                <td colspan="6" align = "center">
                    <input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
                </td>
              </tr>
            </table>

                </div>
              </div>
            </div>
          </div>

添加按钮的脚本

    $('#price_addmorebtn').click(function(){
    var selected_val = $("input[type=radio][name=comission_type]:checked").val();    
    var date_disabled="";
    if (selected_val == '2' || selected_val == '3') {
      date_disabled=" disabled ";
    }
     var tr = "<tr>";
     tr += "<td><input type=\"number\" name=\"commissions_start_price[]\" class=\"form-control\"  placeholder=\"Start Price\"  required /></td>";
     tr += "<td><input type=\"number\" name=\"commissions_end_price[]\" class=\"form-control\"  placeholder=\"End Price\" required /></td>";
     tr += "<td><div class=\"input-with-icon\"><input name=\"start_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control start_date\" required"+date_disabled+" /><span class=\"icon icon-calendar input-icon\"></span></div></td>";
     tr += "<td><div class=\"input-with-icon\"><input name=\"end_date[]\" placeholder=\"Start date\" data-provide=\"datepicker\" data-date-today-highlight=\"true\" class=\"form-control end_date\" required"+date_disabled+" /><span class=\"icon icon-calendar input-icon\"></span></div></td>";
     tr += "<td><input type=\"number\" name=\"commissions_amount[]\" class=\"form-control\" placeholder=\"Commision price\" required /></td>";
     tr += "<td><span class = 'romoverow icon icon-close' style=\"cursor:pointer; padding-top:12px;\" title=\"Click to remove this row.\"></span></td>";
     $('#commision_tbl tr:last').before(tr);
 });
     $(document).on('click','.romoverow',function(){
         //alert('Hello');
          $(this).closest( 'tr').remove();
     });

禁用每月/每年单选按钮的两个字段的脚本代码

$('input[type=radio][name=comission_type]').change(function() {
       if (this.value == '0' || this.value == '1') {
         $(".start_date").attr("disabled",false);
         $(".end_date").attr("disabled",false);


       }
       else if (this.value == '2' || this.value == '3') {

          $(".start_date").attr("disabled",true);
          $(".end_date").attr("disabled",true);           

       }
   });