59

フォーム値をアクション クラスにポストする必要があるフォームがあります。このフォームには、読み取り専用にする必要があるチェックボックスがあります。設定disabled="true"してみましたが、アクションクラスに投稿するとうまくいきません。

じゃあアドバイスお願いします??

4

15 に答える 15

115

チェックボックスを読み取り専用にするプロパティはありません。しかし、このトリックを試すことができます。

<input type="checkbox" onclick="return false" />

デモ

于 2012-09-04T16:01:08.747 に答える
41 
<input type="checkbox" checked onclick="return false;" onkeydown="return false;"/>

http://jsfiddle.net/2srjc/

タブ オーダーが気になる場合は、タブ キーが押されていないときの keydown イベントに対してのみ false を返します。

<input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/>

http://jsfiddle.net/2srjc/149/

于 2012-09-04T16:05:20.710 に答える
35

cssで簡単にできます。 HTML :

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" readonly />
    <br/>
    <input name="chkBox_2" type="checkbox" value="1" readonly />
    <br/>
    <input id="submitBttn" type="button" value="Submit">
</form>

CSS :

input[type="checkbox"][readonly] {
  pointer-events: none;
}

デモ

于 2017-01-05T13:43:10.790 に答える
13

私は個人的にこのようにするのが好きです：

<input type="checkbox" name="option" value="1" disabled="disabled" />
<input type="hidden" name="option" value="1">

私は、次の 2 つの理由から、これが優れていると考えています。

  1. ユーザーは、この値を編集できないことを明確に理解しています
  2. フォームの送信時に値が送信されます。
于 2015-05-28T16:09:23.107 に答える
9

単純に追加できますonclick="return false"-これにより、ブラウザがデフォルトアクションを実行しなくなります（チェックボックスがオン/オフは変更されません）

于 2012-09-04T16:01:14.440 に答える
3

チェックボックスで readonly 属性を使用できるように、JQuery を使用します。

//This will make all read-only check boxes truly read-only
$('input[type="checkbox"][readonly]').on("click.readonly", function(event){event.preventDefault();}).css("opacity", "0.5");

チェックボックスを再び編集可能にするには、特定のチェックボックスに対して次の操作を行う必要があります。

$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")
于 2015-07-15T17:00:24.477 に答える
0

これが Sencha ExtJS 7.2+ の私のソリューション (オーバーライド) です (単一のオーバーライドでチェックボックスとラジオ)


Ext.define('MyApp.override.field.Checkbox', {
    override: 'Ext.field.Checkbox',

    /**
     * OVERRIDE: to allow updateReadOnly to work propperly
     * @param {boolean} newValue
     *
     * To ensure the disabled state stays active if the field is still readOnly
     * we re - set the disabled state
     */
    updateDisabled(newValue) {
        this.callParent(arguments);

        if (!newValue && this.getReadOnly()) {
            this.inputElement.dom.disabled = true;
        }
    },

    /**
     * OVERRIDE: readonly for radiogroups and checkboxgroup do not work as other fields
     *     https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
     *
     * @param {boolean} newValue
     *
     *  - use disabled on the field
     */
    updateReadOnly(value) {
        this.callParent(arguments);

        if (!this.getDisabled()) {
            this.inputElement.dom.disabled = value;
        }
    }
});
于 2021-09-06T12:11:37.890 に答える
-1

CSS を介して:

<label for="">
  <input type="checkbox" style="pointer-events: none; tabindex: -1;" checked> Label
</label>

IE<10 ではポインターイベントはサポートされていません

https://jsfiddle.net/fl4sh/3r0v8pug/2/

于 2017-12-08T10:25:12.477 に答える