啓用/禁用文本框視複選框 - JavaScript的

您好，我有一些問題，當我嘗試做一些PHP和JavaScript函數我想要做什麼是一個文本框，將去根據在左側啓用/禁用文本框視複選框 - JavaScript的

複選框啓用/禁用

這是我的代碼

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <script type="text/javascript"> 
     function enable_txtbox(id){ 
      if(document.getElementById(id).disabled){ 
       document.getElementById(id).disabled=false; 
       var x = document.getElementById(id).disabled; 
       document.getElementById("demo").innerHTML=x; 
      } 
      else 
       document.getElementById(id).disabled=true; 
     } 
    </script> 
</head> 
<body> 
    <form method="get"> 
    <table> 
     <tbody> 
      <tr> 
       <td>Nama Gejala</td> 
       <td>:</td> 
       <td><input type="text" name="nama"></td> 
      </tr> 
      <tr> 
       <td>Jenis Gejala</td> 
       <td>:</td> 
       <td><select name="jenis"> 
         <option value="0">Umum</option> 
         <option value="1">Khusus</option> 
        </select></td> 
      </tr> 
     </tbody> 
    </table> 
     <table> 
      <thead> 
       <tr> 
        <td>Penyakit yang Berhubungan</td> 
        <td>:</td> 
       </tr> 
      </thead> 
      <tbody> 
       <?php 
        $id=1; 
        while($row = mysqli_fetch_array($result)){ 
         $id=$row['id']; 
         echo "<tr>"; 
         echo "<td><input type='checkbox' name='chk$id' value='$id' onclick='enable_txtbox('".$id."')'>".$row['nama']."<br></td>"; 
         echo "<td>Nilai Kepastian</td>"; 
         echo"<td>:</td>"; 
         echo "<td><input type='text' name='cf".$id." id='$id' disabled='disabled'></td>"; 
         echo "</tr>"; 
        } 
        mysqli_close($con); 
       ?> 
      </tbody> 
     </table> 
     <table> 
      <tbody> 
       <tr> 
        <p id="demo"></p> 
        <td><input type="submit"></td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 
</body> 
</html>

PS：我有超過1個複選框和文本框取決於我的數據庫文件之前

感謝，並原諒我的英語不好的技能:)

來源

2014-03-24 Sandy Budiyanto

變化'disabled'到'checked' – SoaperGEM

我希望這可以解決您的問題。

腳本...

function enable_txtbox(id){ 
     if(document.getElementById(id).disabled){ 
      document.getElementById(id).disabled=false; 
      var x = document.getElementById(id).disabled; 
      document.getElementById("demo").innerHTML=x; 
     } else {     
      document.getElementById(id).disabled=true; 
      var x = document.getElementById(id).disabled; 
      document.getElementById("demo").innerHTML=x; 
     } 
    }

HTML ....

<table> 
     <tbody> 
      <tr> 
       <td>Nama Gejala</td> 
       <td>:</td> 
       <td><input type="text" name="nama"/></td> 
      </tr> 
      <tr> 
       <td>Jenis Gejala</td> 
       <td>:</td> 
       <td><select name="jenis"> 
         <option value="0">Umum</option> 
         <option value="1">Khusus</option> 
        </select></td> 
      </tr> 
     </tbody> 
    </table> 
    <table> 
     <thead> 
      <tr> 
       <td>Penyakit yang Berhubungan</td> 
       <td>:</td> 
      </tr> 
     </thead> 
     <tbody> 

      <tr> 
       <td>check1</td> 
       <td><input type="checkbox" onclick="enable_txtbox('first')" /></td> 
      </tr> 
      <tr> 
       <td>Txt1</td> 
       <td><textarea id="first"> </textarea></td> 
      </tr> 

      <tr> 
       <td>check2</td> 
       <td><input type="checkbox" onclick="enable_txtbox('second')" /></td> 
      </tr> 
      <tr> 
       <td>Txt2</td> 
       <td><textarea id="second"> </textarea></td> 
      </tr> 
     </tbody> 
    </table> 
    <table> 
     <tbody> 
      <tr> 
       <p id="demo"></p> 
       <td><input type="submit"/></td> 
      </tr> 
     </tbody> 
    </table>

JSPIDDLE

來源

2014-03-24 17:52:26 Airan

好，因爲我的複選框和我的文本框取決於我的數據庫，我不認爲你的HTML是正確的 –

我希望每行$ id是唯一的。如果我是對的，你只需要將$ id傳遞給你的js方法，並使用相同的$ id作爲相應的textarea。確保你在js中獲得的id與你的textarea id相同。 – Airan

$ id是唯一的，因爲那是我的數據庫的ID字段我不知道是什麼原因，但是我的js函數沒有在我的代碼上工作，即使只是調用我的函數也是不行的 –

你應該使用jQuery選中該複選框是否被選中。假設你有一個複選框id ='idTag'，我們想檢查複選框是否被選中。

$('#idTag').is(":checked")

如果勾選複選框，則返回true;從那時起，你可以使用jQuery來顯示它是隱藏的，還是將它附加到div。表示文本輸入框具有id'textId'。

方法一：

if($('#idTag').is(":checked")) 
    $("#textId").css("display", "block"); //if you just like to show the block. 

if($('#idTag').is(":checked")) 
    $("#textId").fadeIn("slow"); //Gives it a nice effect as well.

方法二：

<div id='DIV'> 
    <input type='checkbox' id='idTag' value='checkbox'/> 
</div> 
<script> 
    if($('#idTag').is(":checked")) 
     $("#DIV").append("<input type='text' placeholder='textbox' />"); 
</script>

來源

2014-03-24 17:53:09

你可以簡化你的函數

DEMO http://jsfiddle.net/x8dSP/2853/

<script> 
    function enable_txtbox(id){ 
    if(document.getElementById(id).disabled == true){ 
     document.getElementById(id).disabled = false; 
    } else { 
     document.getElementById(id).disabled = true; 
    } 
    return true; 
} 
</script>

來源

2014-03-24 17:55:47 Vector

我已經看到你的代碼在該鏈接上，但它仍然不能在我的工作我認爲我的問題是在我的複選框聲明在回聲聲明 –

啓用/禁用文本框視複選框 - JavaScript的

回答

相關問題