자바 스크립트를 사용하여 확인란 선택 유효성 검사

Question

내가해야하는 맞춤 기능 코딩에 대한 도움이 필요합니다.

개념은 간단합니다 : 고객에게 ~ 20 개 제품 목록을 제공 한 다음 확인란을 사용하여 전체 목록에서 5 개 제품을 선택하도록 요청합니다.

그리고 제품을 선택하는 동안 숨겨진 입력을 업데이트해야 데이터베이스에 삽입 할 수 있습니다.

우리는 다음과 같이 시작할 수 있습니다 : http://jsfiddle.net/9mxh5/ 그러나 나는 단지 많은 수의 체크 박스를 선택할 수 있기 때문에 작동해야합니다. http://jsfiddle.net/ENxnK/15/

들으을 사전에 도움을 : 여기

는 내가하고 싶은처럼 우리가 내가 저기 jsfiddle을 사용하고 너무

<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" /> 

사용하고 적응할 수있는 몇 가지 코드입니다.

Answer 1

조건을 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> 

Answer 2

@polin 내가 업데이 트됩니다 그러나 이것은 매우 optimsed되지 않고, 아니. 그렇다면 클래스를 비활성화 할 때가 아닌지 확인합니다.

은 더 나은 코드가 필요합니다 : D

자바 스크립트

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>