0

すべての午後。

金曜日のちょっとしたごちそうです。

別の入力の選択に基づいて入力を読み取り専用にする次のjqueryがあります。

私は本当にjsfiddleが好きです

それはうまく機能し、うまく機能します。うまく機能させたいと思っています。

ただし、私の状況では、関連するcheckbox1bとtextbox1を持つ約13個の「checkbox1a」があります。

スクリプトからわかるように、このコードを複製することはできますが、誰もが知っているように、コピー アンド ペーストは良くありません (金曜の午後に控訴しますが)。しかし、同じ結果を達成し、

どんなポインタでも大歓迎です。

4

4 に答える 4

1

いくつかのクラスを追加して、jQueryブードゥーを少し実行するだけです。jsfiddleを参照してください。

無効/有効になっているコントロールにクラスを追加しないことは可能ですが、クラスを使用すると、何を有効/無効にするかをよりきめ細かく制御できます。

于 2012-10-05T15:21:11.537 に答える
1

すべてを1つの変更イベントに組み合わせることができます-これらがページ上にある唯一のチェックボックスであると仮定します。または、それらを選択するためのクラスを与えることができます。

$('input[type=checkbox]').change(function(){
   var $this = $(this); 
   var $inputs = $this.closest('tr').find('input'); // get relative inputs
   $inputs.not($this).prop('disabled',$inputs[0].checked);  
   // disable fields if first checkbox is checked
});

http://jsfiddle.net/EEuUw/

また、 propは無効なプロパティ（jQuery 1.6+）を設定する適切な方法です。これはjQueryドキュメントからのものです

.attr（）メソッドの代わりに、.prop（）メソッドを使用して無効に設定し、チェックする必要があります。

于 2012-10-05T15:21:14.890 に答える
1

これらすべてに 1 回のクリック イベントを書き込むことができます。

var $tr = $(this).closest('tr');

// access checkbox b inside it

  $tr.find('[id*=checkbox][id$="b"]').attr('disabled', 'disabled');

// access textbox  inside it

  $tr.find('input[type="text"]').attr('disabled', 'disabled');

フィドルをチェック

この方法ですべてのチェックボックス クリック イベントを処理するシングル クリック イベントを作成できます。

より良いのは、IDの代わりにチェックボックスにクラスを与えることです..

チェックボックス a - class="checkboxa" チェックボックス b - class="checkboxb" テキストボックス - class="textbox"

クラスで更新されたフィドル

これにより、コードがよりクリーンになり、扱いやすくなります...

于 2012-10-05T15:16:27.963 に答える
0

似たようなことに取り組みました。これが私がそれをどのように扱ったかです：

チェックボックスとテキストボックスにクラスを追加し、IDのインデックスを文字列の最後に移動して（jqueryを簡単にします）、次のようになります。

これがフィドルリンクです

<table>
    <tr>
        <td><input  class="checkboxa" type="checkbox" name="input1" id="checkboxa1"/> </td>
        <td><input  class="checkboxb" type="checkbox" id="checkboxb1" /></td>
        <td> <input type="text" id="texbox1" /></td>
    </tr>
    <tr>
        <td><input  class="checkboxa" type="checkbox" name="input2" id="checkboxa2"/> </td>
        <td><input  class="checkboxb" type="checkbox" id="checkboxb2" /></td>
        <td><input type="text" id="texbox2" /></td>
    </tr>
</table>

このアプローチを使用すると、JQueryは、「最も近い」または「検索」でコントロールを検索しようとしてDOMを上下に移動する必要がなく、コントロールを直接ターゲットにすることができます。

$(function() {
    $('.checkboxa').click(function() {
        var index = $(this).attr('id').toString().substring(9);
        $('#checkboxb' + index).attr('disabled', $('#checkboxa' + index)[0].checked);
        $('#texbox' + index).prop('disabled', $('#checkboxa' + index)[0].checked);
    });
});​
于 2012-10-05T17:52:52.463 に答える