48

チェックボックスの「チェック」を無効にするように依頼されました。チェックボックスを無効にするように求められているのではなく、単に「ティック」を無効にするよう求められています。

つまり、ユーザーはチェックボックスがチェック可能であると考えますが、そうではありません。代わりに、チェックボックスをクリックすると、モーダル ダイアログが表示され、チェックボックスが表す機能をオンまたはオフにするためのより多くのオプションがユーザーに提供されます。ダイアログで選択したオプションによって機能がオンになる場合、チェックボックスがオンになります。

ここで、本当の問題は、チェックボックスがチェックされていることを一瞬でも確認できることです。

私はこのようなアプローチを試みました：

<input type='checkbox' onclick='return false' onkeydown='return false' />

$('input[type="checkbox"]').click(function(event) {
    event.preventDefault();
    alert('Break');
});

これを実行すると、アラートが表示され、ティックが表示されていることが示されます (アラートは、まだティックされていることを示すために存在します。本番環境では、アラートは表示されません)。低速のマシンを使用している一部のユーザーや、低速のレンダラー/javascript を使用するブラウザーでは、非常にかすかなちらつきが見られる場合があります (ちらつきが 0.5 秒間続くことがありますが、これは顕著です)。

私のチームのテスターがこれを欠陥として報告しており、私が修正することになっています。チェックボックスの目盛りがちらつくのを防ぐために他に何ができるかわかりません!

4

14 に答える 14

20

試す

event.stopPropagation();

http://jsfiddle.net/DrKfE/3/

于 2012-05-15T23:38:37.227 に答える
10

この効果は抑えられないのではないかと思います。チェックボックスをクリックするとすぐに、状態（およびレンダリング）が変更されます。次に、イベントハンドラーが呼び出されます。を実行すると、すべてのハンドラーが実行された後event.preventDefault()にチェックボックスがリセットされます。ハンドラーの実行時間が長い場合（モーダルで簡単にテスト可能）、および/またはリセットする前にレンダリングエンジンが再描画する場合、ボックスがちらつきます。alert()

$('input[type="checkbox"]').click(function(event) {
    this.checked = false; // reset first
    event.preventDefault();
    // event.stopPropagation() like in Zoltan's answer would also spare some
    // handler execution time, but is no more needed here

    // then do the heavy processing:
    alert('Break');
});

このソリューションはちらつきを最小限に抑えますが、実際にそれを妨げることはできません。チェックボックスをシミュレートする方法については、Thr4wnとRobGの回答を参照してください。私は次のことを好みます：

<button id="settings" title="open extended settings">
    <img src="default_checkbox.png" />
</button>

document.getElementById("settings").addEventListener("click", function(e) {
    var img = this.getElementsByTagName("img")[0]);
    openExtendedSettingsDialog(function callbackTick() {
        img.src = "checked_checkbox.png";
    }, function callbackUntick() {
        img.src = "unchecked_checkbox.png";
    });
}, false);
于 2012-05-16T00:20:17.107 に答える
6

より簡単ではありませんか？:

<input type="checkbox" onchange="this.checked = !this.checked">
于 2019-04-10T11:41:01.160 に答える
2

CSSでチェックボックスの画像を変更できます。http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/およびCSS Styling Checkboxesも参照してください。

チェックボックスを無効にしますが、動作中のチェックボックスの画像に置き換えます。そうすれば、チェックボックスは無効に見えませんが、クリックできなくなります。

于 2012-05-15T23:38:57.063 に答える
2

チェックボックスを、何らかの方法でポインター イベントをブロックする別の要素でラップします (おそらく CSS 経由)。次に、チェックボックスを直接ではなく、wrapperのクリック イベントを処理します。これにはさまざまな方法がありますが、比較的単純な実装例を次に示します。

$('input[type="checkbox"').parent('.disabled').click( function() {
    
    // Add in whatever functionality you need here
    
    alert('Break');
    
});
/* Insert an invisible element that covers the checkbox */
.disabled {
    position: relative;
}
.disabled::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Only wrapped checkboxes are "disabled" -->
<input type="checkbox" />
<span class="disabled"><input type="checkbox" /></span>
<input type="checkbox" />
<span class="disabled"><input type="checkbox" /></span>
<span class="disabled"><input type="checkbox" /></span>
<input type="checkbox" />

注: 必要に応じて、ラッパー要素をプログラムで追加することもできます。

于 2015-07-31T16:28:26.010 に答える
1

間違ったインターフェイス要素を使用しているように思えますが、より適切なのは、デフォルトでは無効になっているボタンですが、そのオプションが使用可能な場合は有効になります。表示される画像は、好きなものにすることができます。

<button disabled onclick="doSomething();">Some option</button>

ユーザーがその機能を選択したら、ボタンを有効にします。ボタンの画像は、CSSが有効かどうかに応じて、または有効化/無効化機能によって変更できます。

例えば

<script type="text/javascript">

function setOption(el) {
  var idMap = {option1:'b0', option2: 'b1'};
  document.getElementById(idMap[el.value]).disabled = !el.checked; 
}

</script>

<div><p>Select options</p>
  <input type="checkbox" onclick="setOption(this);" value="option1"> Option 1
  <br>
  <input type="checkbox" onclick="setOption(this);" value="option2"> Option 2
  <br>
</div>
<div>
  <button id="b0" onclick="alert('Select…');" disabled>Option 1 settings</button>
  <button id="b1" onclick="alert('Select…');" disabled>Option 2 settings</button>
</div>
于 2012-05-16T00:20:43.770 に答える
1

値を元に戻すだけです

$('input[type="checkbox"]').on('change', function(e) {
    if (new Date().getDate() === 13) {
        $(this).prop('checked', !$(this).prop('checked'));
        e.preventDefault();
        return false;
     }
     // some code here
});
于 2019-08-23T15:16:41.847 に答える