更改后未启用输入字段选择选项

我已创建了一个用于启用/禁用输入字段的独立代码，并且它工作正常。 HTML：更改后未启用输入字段选择选项

Identification Type: 
    <select name="Identification-Type" id="Identification-Type"> 
     <label for="Identification-Type">Identification Type:</label> 
     <option value="1111">--Select--</option> 
     <option value="23434">--sfgdg--</option> 
     <option value="135111">--dfgb--</option> 
     <option value="1165611">--gdg--</option> 
     <option value="114511">--vcbc--</option> 

    </select> 
      <!-- <input type="checkbox" class="Identification-Number" value="Identification-Number" 
      name="Identification-number" id="Identification-Number"> --> 
      <label for="Identification-Number"><em>*</em>Identification Number:</label> 
       <input type="text" name="Identification-Number" id="Identification-Number">

JS：

$('select[name="Identification-Type"]').change(function() { 

       var $this = $('#Identification-Number'); 


       $this.attr("disabled", false); 
      $this.attr("disabled", ($(this).val() == '1111') ? true : false); 

      }).trigger('change');

JSFIDDLE LINK

但是，当我试图将这一逻辑的另一种形式，它不工作。

HTML：

 <form name="pancettaForm" method="post" action="demor" id="pancettaForm"> 
    <ul> 
     <li> 
      <label for="PartyChoose">Choose Appropriate Party:</label> 
     </li> 
     <br> 
     <input id="person" name="PartyChoose" type="radio" value="update-person" class="required" />Person 
     <br /> 
     <input id="organization" name="PartyChoose" type="radio" value="update-organization" class="required" />Organization 
     <br /> 
     <li id="Family-Name" style="display: none;"> 
      <input type="checkbox" class="Family-Name" value="Family-name" name="Family-name"> 
      <label for="Family-Name"><em>*</em>Family Name:</label> 
      <input type="text" name="Family-Name" class="required"> 
     </li> 
     <li id="Organization-Name" style="display: none;"> 
      <inpname="Organization-name"> 
       <label for="Organization-Name"><em>*</em>Organization Name:</label> 
       <input type="text" name="Organization-Name" class="required"> 
     </li> 
     <div class="extraPersonTemplate"> 
      <div class="controls-row"> 
       <li id="Identification-Type" style="display: none;">Identification Type: 
        <select name="Identification-Type" class="Identification-Type"> 
         <label for="Identification-Type">Identification Type:</label> 
         <option value="1111">--Select--</option> 
         <option value="1">--sdsd--</option> 
         <option value="2">--cxc--</option> 
         <option value="3">--cvcv--</option> 
         <select> <a id="Identification-Number" style="display: none;"> 
        <input type="hidden" class="Identification-Number">         
           <label for="Identification-Number"><em>*</em>Identification Number:</label> 
           <input type="text" name="Identification-Number"> 
            </a> 

       </li> 
      </div> 
     </div> 
     <div id="container"></div> 
<a href="#" id="addRow" style="display: none;"><i class="icon-plus-sign icon-white"> 
</i> Add Identifier</a> 

     <li id="Adminsys-Type" style="display: none;">Admin System Type: 
      <select name="Adminsys-Type" class="Adminsys-Type"> 
       <label for="Adminsys-Type">Admin Type:</label> 
       <option value="0">--Select--</option> 
      </select> 
     </li> 
     <li id="Adminsys-Number" style="display: none;"> 
      <input type="checkbox" class="Adminsys-Number" value="Adminsys-Number" name="Adminsys-number"> 
      <label for="Adminsys-Number"><em>*</em>Admin System Value:</label> 
      <input type="text" name=Adminsys-Number> 
     </li> 
    </ul> 
    <input type="submit" id="button" name="submit" value="Search"> 
</form>

JS：

 $(document).ready(function() { 

    var counter = 0; 



    $('input[name=Organization-Name]').attr('disabled', true); 
    $('input[name=Identification-Number]').attr('disabled', true); 
    $('input[name=Family-Name]').attr('disabled', true); 
    $('input[name=Adminsys-Number]').attr('disabled', true); 

    $('#pancettaForm').change(function() { 


     $('.Organization-Name').click(function() { 
      if ($('.Organization-Name').is(':checked')) { 
       $('input[name=Organization-Name]').val('').attr('disabled', false); 
      } else { 
       $('input[name=Organization-Name]').attr('disabled', true); 
      } 

     }); 

     $('select[name="Identification-Type' + counter + '"]').change(function() { 

      var $this = $('.Identification-Number'); 
      var $input = $this.siblings('input[type=text]'); 
      $input.attr("disabled", false); 
      $input.attr("disabled", ($(this).val() == '1111') ? true : false); 
     }); 


     $('.Adminsys-Number').click(function() { 
      if ($('.Adminsys-Number').is(':checked')) { 
       $('input[name=Adminsys-Number]').val('').attr('disabled', false); 
      } else { 
       $('input[name=Adminsys-Number]').attr('disabled', true); 
      } 

     }); 
     $('.Family-Name').click(function() { 
      if ($('.Family-Name').is(':checked')) { 
       $('input[name=Family-Name]').val('').attr('disabled', false); 
      } else { 
       $('input[name=Family-Name]').attr('disabled', true); 
      } 

     }); 
     $('#Family-Name,#Identification-Number,#Organization-Name').hide(); 
     if ($('#person').prop('checked')) { 
      $('#Family-Name,#Identification-Type,#Identification-Number,#Adminsys-Number,#Adminsys-Type,#addRow,#removeRow').show(); 


     } else if ($('#organization').prop('checked')) { 
      $('#Organization-Name,#Identification-Type,#Identification-Number,#Adminsys-Number,#Adminsys-Type,#addRow,#removeRow').show(); 

     } 
    }); 
    $('<div/>', { 
     'class': 'extraPerson', 
     html: GetHtml() 
    }).appendTo('#container'); 




    $('#addRow').click(function() { 
     if (counter > 10) { 
      alert("Only 10 textboxes allow"); 
      return false; 
     } 



     $('<div/>', { 
      'class': 'extraPerson' + counter, 
       'id': 'extraPerson' + counter, 
      html: GetHtml() + '<a href="javascript:void(0);" class="removeRow" ><i class="icon-plus-sign icon-white"></i> Remove Identifier</a>' 
     }).hide().appendTo('#container').slideDown('slow'); 



     counter++; 


    }); 



    $("#container").on('click', '.removeRow', function() { 
     //$("#extraPerson"+counter).remove(); 
     if (counter < 1) { 
      alert("No more textbox to remove"); 
      return false; 
     } 
     counter--; 
     $(this).parent().remove(); 


    }); 

    function GetHtml() { 
     // var len = $('.extraPerson').length; 

     var $html = $('.extraPersonTemplate').clone(); 
     if (counter == 0) { 
      $html.find('[name=Identification-Number]')[0].name = "Identification-Number" + counter; 
      $html.find('[id=Identification-Number]')[0].name = "Identification-Number" + counter; 
      $html.find('[name=Identification-Type]')[0].name = "Identification-Type" + counter; 

      counter++; 
      return $html.html(); 

     } else { 
      $html.find('[name=Identification-Number]')[0].name = "Identification-Number" + counter; 
      $html.find('[id=Identification-Number]')[0].name = "Identification-Number" + counter; 
      $html.find('[name=Identification-Type]')[0].name = "Identification-Type" + counter; 

      // $html.find('[id=Identification-Type]')[0].id="Identification-Type" + counter; 

      // var remove='<a href="javascript:void(0);" class="removeRow" ><i class="icon-plus-sign icon-white"></i> Remove Identifier</a>'; 
      return $html.html(); 
     } 
    } 
})

JSFIDDLE LINK

我如何可以动态改变选择属性的名称，这样我可以选择性地启用和禁用输入字段多行。

来源

2014-01-22 DeSmOnd

似乎对我来说是一个巨大的代码，而且问题也不是很清楚，你能否重写它？ – Reger

主要部分位于识别类型和识别号码字段中。其他事情可以忽略。我的问题是，在第二个小提琴中，我尝试启用输入字段，如果我选择除第一个选项之外的任何其他选项。虽然，这是在小提琴1工作，它不是在小提琴2中工作。 – DeSmOnd

希望这将帮助你一点，我希望我得到它的正确：

我返工你改变功能，决定了选择框，使输入字段，这样

$('.Identification-Type').change(function() { 
    //#Identification-Type input 
    /** this can be used to count the input fields and use it in a loop later **/ 
    var $inputFields = $('.extraPersonTemplate #Identification-Type input').length; 

    var $idNumber = $('input[name=Identification-Number]'); 
    var $idNumber0 = $('input[name=Identification-Number0]'); 
    ($('select[name=Identification-Type]').val() == '1111') ? $idNumber.attr('disabled', true) : $idNumber.removeAttr('disabled'); 
    ($('select[name=Identification-Type0]').val() == '1111') ? $idNumber0.attr('disabled', true) : $idNumber0.removeAttr('disabled') 
})

但是从我的观点是，这不是最好的方法，因为它不是很动态。如果你能指望了select[name=Identification-Type] + counter不仅是一个输入，但对他们俩像<input type="text" name="Identification-Number0">和<input type="text" name="Identification-Number1">将有可能包括内的这种变化功能在$inputFields一个循环，并循环而被发现

来源

2014-01-22 13:29:03 xhallix

是的，它的确有用。然而，如果我的计数器太大，我需要动态选择属性名称，这就是为什么，我需要一个更清洁的逻辑。这种硬编码不适用于生产环境。 – DeSmOnd

如果你设法提供一个数字到每个输入字段，这将是没有问题的 – xhallix

只是做一个循环，并使用$ inputFields和哟有你的动态解决方案 – xhallix

http://jsfiddle.net/xKL44/2/这在过去帮助过我......尝试一下！

$('#wow').change(function() { 
// Remove any previously set values 
$('#show_box, #total_box').empty(); 
var sum = 0, 
    price; 
$(this).find('option:selected').each(function() { 
    // Check that the attribute exist, so that any unset values won't bother 
    if ($(this).attr('data-price')) {    
     price = $(this).data('price'); 
     sum += price; 
$('#show_box').append('<h6>' + price + '</h6>'); 
     } 
    }); 
$('#total_box').text(sum);

}）;

来源

2014-06-16 20:31:32 trm5073

更改后未启用输入字段选择选项

回答

相关问题