stackoom
  简体   繁体   中英

disable or enable multiple inputs

 原文  2013-04-09 18:03:37  0   4    javascript

Question

I am trying to disable or enable multiple inputs based on from a check box. I created a function to do it, but When I call the function more than once. It only changes the last function that is called.

demo http://jsfiddle.net/SM8Nx/1/

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>

js 

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");

4 answers

solution1
 1  2013-04-09 18:14:52

I made my own fiddle here: http://jsfiddle.net/SM8Nx/5/

Revamped some of your code, also, used classes. 

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;
    }
}

solution2
 1  2013-04-09 18:21:12

Here is a DEMO using addEventListener and attachEvent (for IE compatibility).. 

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 :(
}

solution3
 0  2013-04-09 18:15:46

Use addEventListener to attach events to DOM elements. 

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

Note: For IE compatibility, you'll have to use attachEvent . https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener#Compatibility

solution4
 0  2015-12-26 05:13:04

<!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>

More detail info refer http://www.easycodingclub.com/disabled-multiple-input-fields-using-javascript/javascript-tutorials/

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to disable require in multiple inputs and enable the other input in javascript Javascript disable container, but enable inputs in it disable button with multiple inputs Enable/disable multiple textboxes Enable multiple inputs by checking a checkbox Enable/Disable other inputs based on select option Enable/disable a button based on inputs' validations Is the a common way to disable/enable jQuery Mobile inputs? Enable / Disable button depending on two inputs Multiple javascript buttons (Enable/Disable)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM