1

必要なカスタム関数のコーディングについて助けが必要です。

コンセプトはシンプルです。顧客に 20 個までの製品のリストを提供し、チェックボックスを使用してリスト全体から 5 つの製品を選択するよう依頼します。

そして、彼らが製品を選択している間に、非表示の入力を更新する必要があるため、データベースに挿入できるようになります。

http://jsfiddle.net/9mxh5/のようなものから始めることができますが、動作する必要があるだけなので、いくつかのチェックボックスしか選択できません。

ここにも使用できるコードがあります

<input type="checkbox" name="products" value="product1" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product2" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product3" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product4" onChange="javascript:updateProducts();"/>

<!-- Hidden -->
<input type="hidden" name="myFiveProducts" value="THELIST" />

私はそこでjsfiddleを使用し、やりたいように適応させました: http://jsfiddle.net/ENxnK/15/

あなたの助けのために前もってThx。

4

2 に答える 2

0

@ポリン

やりたいことをする方法を見つけましたが、これはあまり最適化されていません..

クラスを使用して、チェックされているものとチェックされていないものを判断しています。次に、それを無効にするクラスがないことを確認します。

より良いコードのみが必要です:D

JavaScript

var i = 0;
function updateProducts(myid)
{

    if(document.getElementById(myid).checked == true)
    {
        // Add a class to the element
        document.getElementById(myid).className = "classCheck";

        i = i + 1;

        // If I got my maximum
        if(i == 3)
        {
            if(!$('#products1').hasClass('classCheck'))
            {
                document.getElementById("products1").disabled="disabled";
            }
            if(!$('#products2').hasClass('classCheck'))
            {
                document.getElementById("products12").disabled="disabled";
            }
            if(!$('#products3').hasClass('classCheck'))
            {
                document.getElementById("products3").disabled="disabled";
            }
            if(!$('#products4').hasClass('classCheck'))
            {
                document.getElementById("products4").disabled="disabled";
            }
        }   
    }
    else
    {
        document.getElementById(myid).className = "";
        i = i - 1;

        // If I'm not at the maximum
        if(i < 3)
        {
            // I can switch them all enable
            $('#products1').removeAttr('disabled');
            $('#products2').removeAttr('disabled');
            $('#products3').removeAttr('disabled');
            $('#products4').removeAttr('disabled');
        }
    }
}

HTML

<div id="mydiv">
<input type="checkbox" id="products1" value="product1" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products2" value="product2" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products3" value="product3" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products4" value="product4" onChange="javascript:updateProducts(this.id);"/>
</div>
于 2012-11-06T13:50:50.307 に答える
0

3 の条件を指定しました。5 に変更できます。隠し変数を自分で割り当てることができると思います。できない場合はお知らせください。更新します

<script type="text/javascript">
var i=0;
    function updateProducts(myid)
{

    if(document.getElementById(myid).checked==true)
    {i=i+1;

    if(i==3)
    {
    document.getElementById("products1").disabled="disabled";
    document.getElementById("products2").disabled="disabled";
    document.getElementById("products3").disabled="disabled";
    document.getElementById("products4").disabled="disabled";
    }
    }
    else
    i=i-1;
}
</script>
    <div id="mydiv">
<input type="checkbox" id="products1" value="product1" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products2" value="product2" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products3" value="product3" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products4" value="product4" onChange="javascript:updateProducts(this.id);"/>
</div>
于 2012-11-06T07:19:10.920 に答える