禁用或啓用多個輸入

我試圖根據複選框禁用或啓用多個輸入。我創建了一個函數來完成它，但是當我多次調用函數時。它只會改變被調用的最後一個函數。禁用或啓用多個輸入

HTML

<input type="checkbox" name="state" id="state"><br> 

First name: <input type="text" name="fname" id="fnamex"><br> 
Middle name: <input type="text" name="mname" id="mnamex"><br> 
Last name: <input type="text" name="lname" id="lnamex"><br>

function disable(action, affected) { 
    if (document.getElementById(action).checked === false) { 
     document.getElementById(affected).disabled = true; 
    } 

    document.getElementById(action).onclick = function() { 
     if (document.getElementById(action).checked === true) { 
      document.getElementById(affected).disabled = false; 
     } else { 
      document.getElementById(affected).disabled = true; 
     } 
    }; 
} 


disable("state", "fnamex"); 
disable("state", "lnamex");

來源

2013-04-09 Mr. 1.0

這是因爲要覆蓋'click'事件處理程序（'文件。 getElementById（action）.onclick'）。 – 2013-04-09 18:05:53

加上你有'行動'和'受影響'倒退。你需要使用'document.getElementById（affected）' – 2013-04-09 18:08:04

我更新你的小提琴http://jsfiddle.net/SM8Nx/3/ – Hackerman 2013-04-09 18:10:22

我做我自己搗鼓這裏：http://jsfiddle.net/SM8Nx/5/

翻新的一些代碼，同樣，使用的類。

function disable() { 
    var elements = document.getElementsByClassName("d"); 
    document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false); 
} 

function doIt(elements, status) { 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].disabled = status; 
    } 
}

來源

2013-04-09 18:14:52 tymeJV

使用addEventListener將事件附加到DOM元素。

document.getElementById(action).addEventListener('click', function() { 
     if (document.getElementById(action).checked === true) { 
      document.getElementById(affected).disabled = false; 
     } else { 
      document.getElementById(affected).disabled = true; 
     } 
    });

注意：對於IE兼容性，您必須使用attachEvent。 https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener#Compatibility

來源

2013-04-09 18:15:46 vsr

Here is a DEMO使用addEventListener和的attachEvent（用於IE兼容性）..

function disable(action, affected) { 
    var elem = document.getElementById(action), 
     elemAffected = document.getElementById(affected); 

    if (elem.checked === false) { 
     elemAffected.disabled = true; 
    } 
    var handler = function() { 
     if (elem.checked === true) { 
      elemAffected.disabled = false; 
     } else { 
      elemAffected.disabled = true; 
     } 
    }; 
    if(elem.addEventListener) elem.addEventListener('click', handler); 
    else elem.attachEvent('click', handler); // IE :(
}

來源

2013-04-09 18:21:12 fernandosavio

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> javascript Fuctions </TITLE> 
<script language="JavaScript"> 
function copyCheckboxes(checkbx,priority, active, fDate, tDate){ 
       var idd=document.getElementById(checkbx).id; 
if(document.getElementById(checkbx).checked==true){ 
       document.getElementById(priority+idd).disabled=false; 
       document.getElementById(active+idd).disabled=false; 
       document.getElementById(fDate+idd).disabled=false; 
       document.getElementById(tDate+idd).disabled=false; 
}else{ 
       document.getElementById(priority+idd).disabled=true; 
       document.getElementById(active+idd).disabled=true; 
       document.getElementById(fDate+idd).disabled=true; 
       document.getElementById(tDate+idd).disabled=true; 
} 
} 
</script> 
</HEAD> 
<BODY> 
<form method="post" action="tbl_row_delete.php" name="rowsDeleteForm"> 
    <table id="table_results" border="0" cellpadding="2" cellspacing="1"> 
    <!-- Results table headers --> 
    <!-- Results table body --> 
    <tr > 
     <td width="16" align="center" valign="top" bgcolor="#D5D5D5">&nbsp; </td> 
     <td align="right" valign="top" bgcolor="#D5D5D5" class="nowrap">id</td> 
     <td valign="top" bgcolor="#D5D5D5">rate</td> 
     <td valign="top" bgcolor="#D5D5D5">priority</td> 
     <td valign="top" bgcolor="#D5D5D5">active</td> 
     <td valign="top" bgcolor="#D5D5D5">from_date</td> 
     <td valign="top" bgcolor="#D5D5D5">to_date</td> 
    </tr> 
    <tr > 
     <td width="16" align="center" valign="top" bgcolor="#D5D5D5"> <input type="checkbox" id="1" name="rows_to_delete1" onClick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');" /> 
     </td> 
     <td align="right" valign="top" bgcolor="#D5D5D5" class="nowrap">1</td> 
     <td valign="top" bgcolor="#D5D5D5">50</td> 
     <td valign="top" bgcolor="#D5D5D5"><select name="priority[]" id="priority1" disabled> 
      <option value="1" selected>1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select></td> 
     <td valign="top" bgcolor="#D5D5D5"><select name="active[]" id="active1" disabled> 
      <option value="Y" selected>Y</option> 
      <option value="N">N</option> 
     </select></td> 
     <td valign="top" bgcolor="#D5D5D5"><input name="fromDate[]" type="text" id="fromDate1" value="01-02-2007" size="10" maxlength="10" disabled></td> 
     <td valign="top" bgcolor="#D5D5D5"><input name="toDate[]" type="text" id="toDate1" value="01-02-2007" size="10" maxlength="10" disabled></td> 
    </tr> 
    <tr> 
     <td width="16" align="center" valign="top" bgcolor="#E5E5E5"> <input type="checkbox" id="3" name="rows_to_delete3" onclick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');"/> 
     </td> 
     <td align="right" valign="top" bgcolor="#E5E5E5" class="nowrap">3</td> 
     <td valign="top" bgcolor="#E5E5E5">50</td> 
     <td valign="top" bgcolor="#E5E5E5"><select name="priority[]" id="priority3" disabled> 
      <option value="1">1</option> 
      <option value="2" selected>2</option> 
      <option value="3">3</option> 
     </select></td> 
     <td valign="top" bgcolor="#E5E5E5"><select name="active[]" id="active3" disabled> 
      <option value="Y" selected>Y</option> 
      <option value="N">N</option> 
     </select></td> 
     <td valign="top" bgcolor="#E5E5E5"><input name="fromDate[]" type="text" id="fromDate3" value="01-02-2007" size="10" maxlength="10" disabled></td> 
     <td valign="top" bgcolor="#E5E5E5"><input name="toDate[]" type="text" id="toDate3" value="01-02-2007" size="10" maxlength="10" disabled></td> 
    </tr> 
    <tr > 
     <td width="16" align="center" valign="top" bgcolor="#D5D5D5"> <input type="checkbox" id="4" name="rows_to_delete4" onclick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');"/> 
     </td> 
     <td align="right" valign="top" bgcolor="#D5D5D5" class="nowrap">4</td> 
     <td valign="top" bgcolor="#D5D5D5">10</td> 
     <td valign="top" bgcolor="#D5D5D5"><select name="priority[]" id="priority4" disabled> 
      <option value="1" selected>1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select></td> 
     <td valign="top" bgcolor="#D5D5D5"><select name="active[]" id="active4" disabled> 
      <option value="Y" selected>Y</option> 
      <option value="N">N</option> 
     </select></td> 
     <td valign="top" bgcolor="#D5D5D5"><input name="fromDate[]" type="text" id="fromDate4" value="01-02-2007" size="10" maxlength="10" disabled></td> 
     <td valign="top" bgcolor="#D5D5D5"><input name="toDate[]" type="text" id="toDate4" value="01-02-2007" size="10" maxlength="10" disabled></td> 
    </tr> 
    <tr> 
     <td width="16" align="center" valign="top" bgcolor="#E5E5E5"> <input type="checkbox" id="5" name="rows_to_delete5" onclick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');"/> 
     </td> 
     <td align="right" valign="top" bgcolor="#E5E5E5" class="nowrap">5</td> 
     <td valign="top" bgcolor="#E5E5E5">50</td> 
     <td valign="top" bgcolor="#E5E5E5"><select name="priority[]" id="priority5" disabled> 
      <option value="1" selected>1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select></td> 
     <td valign="top" bgcolor="#E5E5E5"><select name="active[]" id="active5" disabled> 
      <option value="Y" selected>Y</option> 
      <option value="N">N</option> 
     </select></td> 
     <td valign="top" bgcolor="#E5E5E5"><input name="fromDate[]" type="text" id="fromDate5" value="01-02-2007" size="10" maxlength="10" disabled></td> 
     <td valign="top" bgcolor="#E5E5E5"><input name="toDate[]" type="text" id="toDate5" value="01-02-2007" size="10" maxlength="10" disabled></td> 
    </tr> 
    </table> 
    </form> 
</BODY> 
</HTML>

來源

2015-12-26 05:13:04 easycodingclub

禁用或啓用多個輸入

回答

相關問題