ul中的li只能单选,这个如何实现???求助,点击其他按钮其他国家不可选择

假设li里面是button，每个button都有id

$(button).on('click', function () {
  if ( $.data('checkedButton') ) { // 已经点击过，第二次点击时
    if ( $.data('checkedButton') !== this.id ) // 第二次点击的不是高亮按钮时
      reuturn false;
    } else { // 第二次点击的是高亮按钮时
      $.removeData('checkedButton');
      $(button).prop('disable', false);
    }
  } else { // 没有点击过，第一次点击时
    $.data('checkedButton', this.id);
    $(this).siblings().prop('disable', true);
  }
})

toBeTheLight

16.6k41634

发布于
2017-01-05

更新于
2017-01-05

没用js写。

        <style type="text/css">
            input{
                display: none;
            }
            label{
                border: 1px solid;
                display: inline-block;
                height : 50px;
                width : 100px;
                font: 30px/50px "微软雅黑";
                text-align:center;
            }
            input:checked+label{
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <input type="radio" name="country" id="usa" value="" />
        <label for="usa">美国</label>
        <input type="radio" name="country" id="china" value="" />
        <label for="china">中国</label>
        <input type="radio" name="country" id="spa" value="" />
        <label for="spa">西班牙</label>
        <input type="radio" name="country" id="other" value="" />
        <label for="other">其他</label>
    </body>

undefind_5

1.5k1297133

发布于
2017-01-05

这就是一个数组循环选取的问题嘛：

var li=document.getElementsByTageName("li");//获取所有选项
for(var i=0,len=li.length;i<len;i++){//循环
    (function(i){
        li[i].onclick=function(){
           //dosomthing;
            alert(i);
        }
    })(i)；
}

慕少艾

3.5k269

发布于
2017-01-05

更新于
2017-01-05

//HTML:

     <ul id='select_ul'>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
     </ul>
        
//JS:
    var lis = Array.prototype.slice.call(document.getElementById('select_ul').getElementsByTagName('li'));
    var len = lis.length;
    function handle() {
        var activeLen = document.querySelectorAll('.active').length;
        if (this.classList.contains('active')) {
            this.classList.remove('active')
        } else {
            if (!activeLen) {
                this.classList.add('active')
            }else{
                lis.forEach(function(item){
                    item.classList.remove('active')
                })
                this.classList.add('active')
            }
        }
    }
    lis.forEach(function(item, i) {
        item.addEventListener('click', handle, false)
    })

ul中的li只能单选,这个如何实现???求助,点击其他按钮其他国家不可选择

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

ul中的li只能单选,这个如何实现???求助,点击其他按钮其他国家不可选择

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？