0

これには問題があります。選択要素に対応する行のチェックボックスをオンにして、選択要素を有効にしたいと考えています。どうやってやるの？

<table>
<?php do { ?>
 <tr>
 <td><input type="checkbox" /></td>
 <td>
    <select disabled="disabled">
     <option value="1">Dog</option>
     <option value="2">Cat</option>
    </select>
 </td>
</tr>
<?php } while($row = mysql_fetch_assoc($result)); ?>
</table>
4

4 に答える 4

2

あなたはこれを試すことができます次のような関数を作成するようなJavascriptです

function CheckMe(field)
{
    var tr = field.parentNode.parentNode;
    var select = tr.getElementsByTagName("select");

    if(select.length>0)
    {
        if(field.checked)
        {
            select[0].removeAttribute("disable");
        }
        else
        {
            select[0].setAttribute("disable", "disable")  
        }
    }
}

phpdoloopを変更します

<td><input type="checkbox" /></td>

に

<td><input type="checkbox" onclick="CheckMe(this)" /></td>
于 2012-07-25T07:00:36.367 に答える
1

プレーンな JavaScript では、このコードは、チェックボックスがチェックされている場合は同じ行の選択リストを有効にし、チェックされていない場合は無効にします。

var table = document.getElementById("myTable");
var checkboxes = table.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("click", function() {
        var row = this.parentNode.parentNode;
        var select = row.getElementsByTagName("select")[0];
        if (this.checked) {
           select.removeAttribute("disabled");
        } else {
           select.setAttribute("disabled", "disabled");
        }
    }, false);
}​

実際のデモ: http://jsfiddle.net/jfriend00/w8ZUj/

参考までに - これはaddEventListener古いバージョンの IE ではサポートされていないものを使用しています。古いバージョンの IE をサポートする必要がある場合は、IEに代わる適切なクロス ブラウザーの代替品をaddEvent使用できます。

于 2012-07-25T06:53:31.267 に答える
0

他の人はparentNodeに基づいて答えを出しましたが、より一般的な解決策はsimlpe upTo関数で使用できます。

function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  var el;
  do {
    el = el.parentNode;
    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  } while (el.parentNode)
}

したがって、選択要素を取得するには、リスナーは次のようになります。

<input type="checkbox" onclick="doSelect(this);">

doSelectは次のとおりです。

function doSelect(el) {
  var sel;
  var row = upTo(el, 'tr');

  if (row) {
    sel = row.getElementsByTagName('select')[0];
  }

  if (sel) {
    sel.disabled = !el.checked;
  }
}
于 2012-07-25T07:15:23.427 に答える
-1

次のように onchange イベントをチェックボックスに追加できます。

<input type="checkbox" onchange="enableSelect(this)" />

次に、このJavaScriptコードを使用して、チェックボックスと同じ行の選択ボックスを有効にします

function enableSelect(checkbox) {
    var selectElements = checkbox.parentNode.parentNode.getElementsByTagName("select");
    selectElements[0].disabled = !checkbox.checked;
}
于 2012-07-25T06:35:26.920 に答える