简化jquery显示隐藏与禁用attr

Question

我的下面的代码似乎工作正常，显示/隐藏基于2无线电选择禁用输入属性的输入字段，但它很难为我的表单中的所有200个字段进行编码。我对此很新，想知道是否有其他方法可以做到这一点。感谢您的时间！

  (function($) { 
       $.fn.toggleDisabled = function(){ 
        return this.each(function(){ 
         this.disabled = !this.disabled; 
        }); 
       }; 
      })(jQuery); 

      $(function(){ 
         if($(".comm_rent_option").val()==="rent") { 
         $("#comm_rent_option1_table").show(); 
         $('input[name="comm_rent"]').prop('disabled', true); 
         $("#comm_rent_option2_table").hide(); 
         $('select[name="comm_rent"]').prop('disabled', false); 
      } else if ($(".comm_rent_option").val()==="percent") { 
         $("#comm_rent_option1_table").hide(); 
         $('input[name="comm_rent"]').prop('disabled', false); 
         $("#comm_rent_option2_table").show(); 
         $('select[name="comm_rent"]').prop('disabled', true); 
      } 
       $(".comm_rent_option").click(function(){ 
        if($(this).val()==="rent") { 
         $("#comm_rent_option1_table").slideToggle("fast"); 
         $("#comm_rent_option2_table").slideToggle("fast"); 
         $('input[name="comm_rent"]').toggleDisabled(); 
         $('select[name="comm_rent"]').toggleDisabled(); 
      } else if ($(this).val()==="percent") { 
         $("#comm_rent_option1_table").slideToggle("fast"); 
         $("#comm_rent_option2_table").slideToggle("fast"); 
         $('input[name="comm_rent"]').toggleDisabled(); 
         $('select[name="comm_rent"]').toggleDisabled(); 
      } 

       }); 
      }); 

这里是Jquery的

  <div class="form-group"> 
       <label class="control-label" for="profile">Rent</label><br> 
       <label class="radio-inline"> 
        <input type="radio" name="comm_rent_option" class="comm_rent_option" id="comm_rent_option1" value="rent" <?php if ($current_user->comm_rent_option == 'rent') {echo 'checked="checked"';} elseif (!isset($current_user->comm_rent_option)) {echo 'checked="checked"'; } ?> >Month's rent 
       </label> 
       <label class="radio-inline"> 
        <input type="radio" name="comm_rent_option" class="comm_rent_option" id="comm_rent_option2" value="percent" <?php if ($current_user->comm_rent_option == 'percent') echo 'checked="checked"'; ?> >Percentage 
       </label> 
      </div> 
      <select name="comm_rent" id="comm_rent_option1_table" class="form-control quad" style="display:none"> 
       <?php $comm_rent = get_option('user_comm_rent'); ?> 
       <option value="2" <?php if (isset($current_user->comm_rent['2_month'])) echo 'selected'; ?> ><?php echo $comm_rent['2_month'] ; ?></option> 
       <option value="1" <?php if (isset($current_user->comm_rent['1_month'])) {echo 'selected';} elseif (!isset($current_user->comm_rent)) {echo 'selected'; } ?> ><?php echo $comm_rent['1_month'] ; ?></option> 
       <option value="0.5" <?php if (isset($current_user->comm_rent['half_month'])) echo 'selected'; ?> ><?php echo $comm_rent['half_month'] ; ?></option> 
      </select> 
      <div id="comm_rent_option2_table" style="display:none"> 
       <table style="width:100%;table-layout:fixed;"> 
        <col width="50%"> 
        <col width="50%"> 
        <tr> 
         <td valign="top"> 
          <div class="form-group"> 
           <div class="input-group"> 
            <input name="comm_rent" class="form-control" type="number" min="0" step="5" value="150"> 
            <div class="input-group-addon">%</div> 
           </div> 
          </div> 
         </td> 
         <td valign="top"> 

         </td> 
        </tr> 
       </table> 
      </div> 

Answer 1

你可以尝试在一个div包装形式，并用它来显示隐藏的HTML，

Answer 2

我能够减少代码的一些范围..试试这个...

$(function() { 
    $("[id^='comm_rent_option'").hide(); 
    $('[name="comm_rent"]').prop('disabled', false); 

    if ($(".comm_rent_option").val() === "rent") { 
     $("#comm_rent_option1_table").show(); 
     $('input[name="comm_rent"]').prop('disabled', true); 
    } else if ($(".comm_rent_option").val() === "percent") { 
     $("#comm_rent_option2_table").show(); 
     $('select[name="comm_rent"]').prop('disabled', true); 
    } 

    $(".comm_rent_option").click(function() { 
     $("[id^='comm_rent_option'").slideToggle("fast"); 
     $('[name="comm_rent"]').toggleDisabled(); 
    }); 
}); 

如果你提供HTML，那么它会更容易给出答案。