0

OK、ここでの質問は、有効または無効など、フォームが mysql 設定から情報を取得できるようにすることです。チェックボックスは、その要求に応じて、次の 3 つのテキスト フィールド (box123) を有効にするか無効にするかを決定します。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="test.js"></script>
</head>
<body>
    <form>
        <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
        <br>
        <input type='text' name="details" id="tb1" value='box1'>
        <br>
        <input type='text' name="details" id="tb2" value='box2'>
        <br>
        <input type='text' name="details" id="tb3" value='box3'>
        <br>
    </form>
</body>

</html

>

test.js 有効化変数に応じてチェックを有効または無効にできる Jquery コード

toggleInputs($('#checker'));

$('#checker').click(function () {
    toggleInputs($(this));
});

function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}
4

2 に答える 2

3

あなたはすでに回答を受け入れていますが、その回答はソリューションをやや複雑にしすぎており、不必要な冗長性を残していると感じています。とはいえ、次のアプローチをお勧めします。

function toggleInputs(element) {
    /* using a multiple selector
       checking whether the check-box is checked or not using ':is()`,
       which returns a Boolean */
    $('#tb1, #tb2, #tb3').prop('disabled', element.is(':checked'));
}

$('#checker').change(function(){
    // event-handling (reacting to the change event)
    toggleInputs($(this));
    /* the next change() (without arguments) triggers the change event,
       and, therefore, the event-handling */
}).change();

JS フィドルのデモ。

上記の関数を (演算子を使用して) 修正し、が である間、およびがチェックされていない間!にフィールドを編集できるようにしました。inputcheckeddisabledinput

function toggleInputs(element) {
    $('#tb1, #tb2, #tb3').prop('disabled', !element.is(':checked'));
}

$('#checker').change(function(){
    toggleInputs($(this));
}).change();

JS フィドルのデモ。

参考文献:

于 2013-09-01T02:42:33.760 に答える
2

どうぞ...あなたの質問が尋ねたように実際にjqueryを使用してください：

HTML

<form>
    <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
    <br>
    <input type='text' name="details" id="tb1" value='box1'>
    <br>
    <input type='text' name="details" id="tb2" value='box2'>
    <br>
    <input type='text' name="details" id="tb3" value='box3'>
    <br>
</form>

JavaScript

$(document).ready(function() {
   toggleInputs($('#checker'));
   $('#checker').click(function () {
       toggleInputs($(this));
    });
});

function toggleInputs(element) {
    if (element.prop('checked')) {
        $('#tb1').prop('disabled', false);
        $('#tb2').prop('disabled', false);
        $('#tb3').prop('disabled', false);
    } else {
        $('#tb1').prop('disabled', true);
        $('#tb2').prop('disabled', true);
        $('#tb3').prop('disabled', true);
    }
}

http://jsfiddle.net/Q9Lg4/40/

最初の呼び出しが行われたとき、本体の要素はまだロードされていません。JQuery Ready イベント関数で toggleInputs への最初の呼び出しをラップするか、フォームの後に test.js を含むスクリプト タグを配置できます。

于 2013-09-01T01:49:38.657 に答える