使用jQuery禁用/启用字段

Question

我有一张桌子，我正在通过克隆添加行。我有一个字段作为下拉菜单，当更改下拉列表的值时，相应的禁用字段被启用。我遇到的问题是，如果我更改上一行的下拉列表的值，当前列行也被启用。任何帮助将不胜感激。谢谢。

function disableField()
    {
    var Count = $('#dataTable tr').length;
    if (Count == 2){
        $("input").not('.DeleteButton').prop('disabled', false);
    }else{
        $("input").prop('disabled', false);
    }
}

var regex = /^([a-zA-Z0-9 _-]+)$/;
    var cindex = 0;
    var quicklink = '' ;
    $(document).on('click','.Buttons', function(addrow) {
      var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
      
      if(count || !$('.id_100 option[value=code]').attr('selected','selected')){
        alert("Please fill the current row");
        return false;
      }
     
      
        var $tr    = $('#dataTable tbody tr:last');
        var $clone = $tr.clone(true);
        cindex++;
    	$clone.find(':input').not('select').not('.DeleteButton').val('').attr('disabled', true);
        $clone.attr('id', 'id'+(cindex) ); //update row id if required
        //update ids of elements in row
        $clone.find("*").each(function() {
                var id = this.id || "";
                if(id != ""){
    
                var match = id.match(regex) || [];
                if (match.length == 2) {
    			this.id = this.name + (cindex);
                }
                }
        });
       $tr.after($clone);
    	
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table cellspacing="0" cellpadding="0" border="0" id="mainbox" class="mainbox"><tr><td>
    	<div class="toppanel"><ul><li></li></ul></div>
    	<div class="abcd"> <!--mainbox middlepanel start-->
    		<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
    			<tr>
    				<td valign="top">
    					<div id="pageheadingpanel">
    						<div id="pageheading">Quick Link Widget Configuration</div>
    						<div id="pageheadingdate"><xsl:call-template name="formatted_date"/></div>
    					</div>
    				</td>		
    			</tr>
    			<tr>
    				<td height="100%" valign="top">
    					<div class="y_scroll"  id="contentarea">
    						<div class="contentarea"><!--contentarea  start-->
    							<span id="box" class="box"> <!--rounded curve/border  start-->
    							<div class="middlepanel"> <!--contentarea  box middlepanel start-->
    	<div style="display:block"  id="textBox1" >
    		 <span id="box1" class="box"> 
    				<div class="toppanel"><ul><li></li></ul></div>
    				<div class="middlepanel"> 
    				
    
    
    <table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
      <thead>
    
        <tr>
          <td class="headingalign" width="16%">Links</td>
          <td class="headingalign" width="32%">Desciption</td>
          <td class="headingalign" width="16%">Image</td>
          <td class="headingalign" width="16%">URL</td>
    	  <td class="headingalign" width="05%"></td>
    
        </tr>
      </thead>
      <tbody>
      
        <tr id="id0" class="vals" name="id0">
    	
          <td>
    	  <div class="id_100">
        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
    		<option value="">Select</option>
    		<xsl:for-each select="values from local db">
    			<xsl:sort order="ascending" select="description"/>
    			<option value="{description}">
    				<xsl:value-of select="description"/>
    			</option>
    		</xsl:for-each>
    		</select>
         </div> </td>
          <td>
            <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}"  />
      
          </td>
          <td>
            <input  id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="35" value="{//RESPONSE}"  />
    		
          </td>
          <td>
            <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}"  />
            
          </td>
    	  <td>
    	  <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
    	  </td>
        </tr>
      </tbody>
    </table>
    		<div class="buttonarea">
      <ul>
        <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
    
      </ul>
     
    </div>

Answer 1

您已在onchange函数中传递了当前目标表tr元素

 function disableField(targetElement)
    {
        
    var Count = $('#dataTable tr').length;
    if (Count == 2){
        $(targetElement).closest('tr').find('input').not('.DeleteButton').prop('disabled', false);
    }else{
        $(targetElement).closest('tr').find('input').prop('disabled', false);
    }
}

var regex = /^([a-zA-Z0-9 _-]+)$/;
    var cindex = 0;
    var quicklink = '' ;
    $(document).on('click','.Buttons', function(addrow) {
      var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
      
      if(count || !$('.id_100 option[value=code]').attr('selected','selected')){
        alert("Please fill the current row");
        return false;
      }
     
      
        var $tr    = $('#dataTable tbody tr:last');
        var $clone = $tr.clone(true);
        cindex++;
    	$clone.find(':input').not('select').not('.DeleteButton').val('').attr('disabled', true);
        $clone.attr('id', 'id'+(cindex) ); //update row id if required
        //update ids of elements in row
        $clone.find("*").each(function() {
                var id = this.id || "";
                if(id != ""){
    
                var match = id.match(regex) || [];
                if (match.length == 2) {
    			this.id = this.name + (cindex);
                }
                }
        });
       $tr.after($clone);
    	
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0" id="mainbox" class="mainbox"><tr><td>
    	<div class="toppanel"><ul><li></li></ul></div>
    	<div class="abcd"> <!--mainbox middlepanel start-->
    		<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
    			<tr>
    				<td valign="top">
    					<div id="pageheadingpanel">
    						<div id="pageheading">Quick Link Widget Configuration</div>
    						<div id="pageheadingdate"><xsl:call-template name="formatted_date"/></div>
    					</div>
    				</td>		
    			</tr>
    			<tr>
    				<td height="100%" valign="top">
    					<div class="y_scroll"  id="contentarea">
    						<div class="contentarea"><!--contentarea  start-->
    							<span id="box" class="box"> <!--rounded curve/border  start-->
    							<div class="middlepanel"> <!--contentarea  box middlepanel start-->
    	<div style="display:block"  id="textBox1" >
    		 <span id="box1" class="box"> 
    				<div class="toppanel"><ul><li></li></ul></div>
    				<div class="middlepanel"> 
    				
    
    
    <table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
      <thead>
    
        <tr>
          <td class="headingalign" width="16%">Links</td>
          <td class="headingalign" width="32%">Desciption</td>
          <td class="headingalign" width="16%">Image</td>
          <td class="headingalign" width="16%">URL</td>
    	  <td class="headingalign" width="05%"></td>
    
        </tr>
      </thead>
      <tbody>
      
        <tr id="id0" class="vals" name="id0">
    	
          <td>
    	  <div class="id_100">
        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
    		<option value="">Select</option>
    		<xsl:for-each select="values from local db">
    			<xsl:sort order="ascending" select="description"/>
    			<option value="{description}">
    				<xsl:value-of select="description"/>
    			</option>
    		</xsl:for-each>
    		</select>
         </div> </td>
          <td>
            <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}"  />
      
          </td>
          <td>
            <input  id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="35" value="{//RESPONSE}"  />
    		
          </td>
          <td>
            <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}"  />
            
          </td>
    	  <td>
    	  <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
    	  </td>
        </tr>
      </tbody>
    </table>
    		<div class="buttonarea">
      <ul>
        <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
    
      </ul>
     
    </div>

Answer 2

您需要将this（当前）元素传递给onChange函数。

<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >

现在，您必须使用this启用，在tr内禁用元素。

 function disableField(ele) {
  var Count = $('#dataTable tr').length;
  if (Count == 2) {
    $(ele).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);
  } else {
    $(ele).closest('tr').find("input").prop('disabled', false);
  }
}

Answer 3

您在做错几件事，在这里看到了与您的代码的区别。 添加新行时不应调用.not('.DeleteButton')，而Count == 2会导致问题，请参阅我已修复的问题。

function disableField(e)
{
	$(e).closest('tr').find("input").prop('disabled', false);
}

var regex = /^([a-zA-Z0-9 _-]+)$/;
    var cindex = 0;
    var quicklink = '' ;
    $(document).on('click','.Buttons', function(addrow) {
      var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
      
      if(count || !$('.id_100 option[value=code]').attr('selected','selected')){
        alert("Please fill the current row");
        return false;
      }
     
        var $tr    = $('#dataTable tbody tr:last');
        var $clone = $tr.clone(true);
        cindex++;
    	$clone.find('input:text').val('').attr('disabled', true);
		$clone.find('input:button').attr('disabled', true);
        $clone.attr('id', 'id'+(cindex) ); //update row id if required
        //update ids of elements in row
        $clone.find("*").each(function() {
                var id = this.id || "";
                if(id != ""){
    
                var match = id.match(regex) || [];
                if (match.length == 2) {
    			this.id = this.name + (cindex);
                }
                }
        });
       $tr.after($clone);
    	
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0" id="mainbox" class="mainbox"><tr><td>
    	<div class="toppanel"><ul><li></li></ul></div>
    	<div class="abcd"> <!--mainbox middlepanel start-->
    		<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
    			<tr>
    				<td valign="top">
    					<div id="pageheadingpanel">
    						<div id="pageheading">Quick Link Widget Configuration</div>
    						<div id="pageheadingdate"><xsl:call-template name="formatted_date"/></div>
    					</div>
    				</td>		
    			</tr>
    			<tr>
    				<td height="100%" valign="top">
    					<div class="y_scroll"  id="contentarea">
    						<div class="contentarea"><!--contentarea  start-->
    							<span id="box" class="box"> <!--rounded curve/border  start-->
    							<div class="middlepanel"> <!--contentarea  box middlepanel start-->
    	<div style="display:block"  id="textBox1" >
    		 <span id="box1" class="box"> 
    				<div class="toppanel"><ul><li></li></ul></div>
    				<div class="middlepanel"> 
    				
    
    
    <table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
      <thead>
    
        <tr>
          <td class="headingalign" width="16%">Links</td>
          <td class="headingalign" width="32%">Desciption</td>
          <td class="headingalign" width="16%">Image</td>
          <td class="headingalign" width="16%">URL</td>
    	  <td class="headingalign" width="05%"></td>
    
        </tr>
      </thead>
      <tbody>
      
        <tr id="id0" class="vals" name="id0">
    	
          <td>
    	  <div class="id_100">
        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
    		<option value="">Select</option>
    		<xsl:for-each select="values from local db">
    			<xsl:sort order="ascending" select="description"/>
    			<option value="{description}">
    				<xsl:value-of select="description"/>
    			</option>
    		</xsl:for-each>
    		</select>
         </div> </td>
          <td>
            <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}"  />
      
          </td>
          <td>
            <input  id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="35" value="{//RESPONSE}"  />
    		
          </td>
          <td>
            <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}"  />
            
          </td>
    	  <td>
    	  <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
    	  </td>
        </tr>
      </tbody>
    </table>
    		<div class="buttonarea">
      <ul>
        <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
    
      </ul>
     
    </div>

Answer 4

尽可能地简化。

function add_row(){
	var code = Math.floor((Math.random() * 99999999999999) + 1)
	var row = 	'<tr id="row-'+code+'"'+  '>'+
					'<td>'+
						'<select '+ 'onchange="disabledatr(' +"'"+code+"'" + ')"' + '>'+
								'<option value="true">disabled</option>'+
								'<option value="false">not disabled</option>'+
						'</select>'+
					'</td>'+
					'<td><input type="text" disabled="false"></td>'+
				'</tr>'


			$("table").append(row )
	}

		function disabledatr(code){
	
			var isdisabled=event.target.value

			$("table #row-"+code+ " input").prop('disabled', (isdisabled=='true')?true:false)
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

</table>


<button id="add" onclick="add_row()">add</button>