0

チェックボックスをオンにすると、そのグループの他のチェックボックスが無効になり、ユーザーが最大 1 つのオプションしか選択できないようにするために、フォームで JavaScript を使用したいと考えています。

これが私のhtmlフォームです：

<label>
    <input type="checkbox" name="subscription[]" value="Sweets" id="subscription_1" />
    Sweets
</label>
&nbsp;
<label>
    <input type="checkbox" name="subscription[]" value="Chocolate" id="subscription_2" />
    Chocolate
</label>
&nbsp;
<label>
    <input type="checkbox" name="subscription[]" value="Fruit & Veg" id="subscription_3" />
    Fruit & Veg
</label>

これは私が使用しようとしているJavaScriptです：

//Check check box
//Script for questions where you check one option or the other (locks other options out)
$(':checkbox').click(function(){ 
    var $checkbox = $(this);
    var isChecked = $checkbox.is(':checked')

    //If no option is checked, the make all the options available to be selected
    //Otherwise, one option must be checked so lock out all other options
    if(isChecked)
        $checkbox.subscription(":checkbox").attr("disabled", "disabled");
    else
        $checkbox.subscription(":checkbox").removeAttr("disabled"); 

});​

誰かが私が間違っているところを説明してもらえますか?

4

3 に答える 3

1

あなたはほとんどあなたがしたことをすることができます：

$(':checkbox').click(function(){
    $(':checkbox').attr("disabled", "disabled");
    $(this).removeAttr("disabled");
});

テストする必要はありません：すべてを無効にし、その後、クリックしたものを有効にします。

デモンストレーション

このUIは、おそらくユーザーの邪魔になることに注意してください。これは、適切に上げられたチェックボックスがどのように動作するかではありません。たとえば、ユーザーは最初のクリックで選択がロックされていることに驚かれることでしょう。

于 2012-10-29T20:27:14.243 に答える
0

これはうまくいきます：

var $checkboxes = $(':checkbox').click(function(){
    $checkboxes.filter('[name="' +
                        this.name.replace(/\[/g,'\\[').replace(/\]/g,'\\]') +
                        '"]')
               .not(this).prop('disabled',this.checked);
});

つまり、変数内のすべてのチェックボックスへの参照を保持します (私はこれを呼び出しました$checkboxes)。これにより、毎回新しい jQuery オブジェクトを作成する必要がなくなります。1 つをクリックすると、他のすべてを無効にしたり、再度有効にしたりできます。.filter()メソッドとメソッド.notを使用して現在のものを除外することにより、同じ名前で。

また、(古いバージョンの jQuery を使用していない限り).prop()メソッドは無効なプロパティを設定する適切な方法であることにも注意してください。

デモ: http://jsfiddle.net/rnbMB/2/

他のチェックボックスを無効にするのではなく、単純にチェックを外した方がユーザーにとって良いと思いますか? そうすれば、一度にチェックできるのは最大でも 1 つだけですが、ユーザーは別のものを選択する前に現在のチェックを外す必要はありません。

var $checkboxes = $(':checkbox').click(function(){
    if (this.checked)
        $checkboxes.filter('[name="' +
                    this.name.replace(/\[/g,'\\[').replace(/\]/g,'\\]') +
                    '"]')
                   .not(this).prop('checked',false);
});

デモ: http://jsfiddle.net/rnbMB/3/

もちろん、どちらの方法でも、そのコードをドキュメント対応ハンドラーおよび/またはすべてのチェックボックスの後に表示されるスクリプト ブロックに配置する必要があります。$checkboxes(変数をグローバル スコープから除外するため、ドキュメント対応ハンドラーが最適な場合があります。)

于 2012-10-29T20:57:24.387 に答える
-1

prop代わりに使用してみてくださいattr

 if(isChecked)
    $checkbox.subscription(":checkbox").prop("disabled", true);
else
    $checkbox.subscription(":checkbox").prop("disabled",false);
于 2012-10-29T20:29:39.443 に答える