javascript - 如何使用 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

我在您的 disableField 函数中添加了一些更改。在 chnage 事件的该函数中传递参数(this) disableField(this)。

function disableField(elem)
	{
	var Count = $('#dataTable tr').length;
	if (Count == 2){
	$(elem).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);
		}
		else{
		$(elem).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').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>