日期:2014-05-17  浏览次数:20397 次

高分请教: 类似 "淘宝颜色尺寸选择" 的问题, 急!!!
HTML code

<html>  
<style>  
 .unchecked{  
   border: 1px solid gray;  
   padding: 5px;  
 }  
 .checked{  
   border: 2px solid #c00;  
   padding: 5px;  
 }  
</style>  
<script src="http://code.jquery.com/jquery-1.4.2.min.js" ></script>  
<script type="text/javascript">  
var obj={  
    colorSpan:"",  
      sizeSpan:""  
};  
function change(span)  
{  
    $('span[name="'+$(span).attr('name')+'"]').each(function(){  
             if(this.checked&&this!=span)  
             {  
                 this.className="unchecked";  
                 this.checked=false;  
             }                 
   });  
   obj[$(span).attr('name')]=span.innerHTML;  
   span.className="checked";  
   span.checked=true;  
   select();  
 }  
function select()  
 {  
     var html='';  
    for(var i in obj)  
    {  
          if(obj[i]!='')  
          {  
               html+='<font color=orange>"'+ obj[i]+'"</font> 、';  
            }  
     }  
     html='<b> 已选择:</b> '+html.slice(0,html.length-1);  
     $('#resultSpan').html(html);
 }  
 </script>  
 <body>  
 <br />  
 <div>  
 颜色:  <span class='unchecked'  name='colorSpan' checked='false' onclick='change(this);'  colorId="1">卡其格</span> <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);'  colorId="2" >黑白格</span>  
 </div>  
 <br />  
 <br />  
 <div>  
 尺码:  <span class='unchecked'  name='sizeSpan'  checked='false' onclick='change(this);'  sizeId="1">S</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);'   sizeId="2">M</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);'   sizeId="3">L</span>  
 </div>  
 <br />  
 <br />  
<div>  
<b>提示:</b>  <span id='resultSpan'></span>  
 </div>
<div>
</div>  
 </body>  
 </html>  





我在JAVASCRIPT区也发有一个同样的帖子, 没有人回答, 所以在这里再提问一次!!

 以上的HTML可以正常运行, 但还有一个要求我不知道怎样做 ( 其实上面也是抄淘宝的, 呵呵 ), 现在说下:

如果 颜色 "卡其格" 只有 "S" 和 "M" 尺寸的, 那么, 当选中颜色 "卡其格" 的时候, "L" 码就不可操作, 即不可选择这个颜色; 相反, 当选择 "L"码的时候 , 颜色 "卡其格" 就不可操作, 请教怎样实现呢??? 


------解决方案--------------------
把其他 样式弄成灰色边框 并且 标签的 鼠标指针为cursor:not-allowed 样式
------解决方案--------------------
我也想知道。。。。
------解决方案--------------------
代码看着眼熟~
------解决方案--------------------
模拟 html radio 的单选效果

http://blog.csdn.net/Sandy945/archive/2010/04/22/5514036.aspx

这个?
------解决方案--------------------
就是判断
这里面用到了JQuery,添加对JQuery脚本的引用
------解决方案--------------------
探讨
模拟 html radio 的单选效果

http://blog.csdn.net/Sandy945/archive/2010/04/22/5514036.aspx

这个?

------解决方案--------------------
他要做判断的。。。比如说某断码 或者颜色的衣服没有了 就不能选