Question

以下是我的功能。我点击按钮时会有多个选择。一旦我点击一个按钮需要选择，另一个按钮应该被禁用。

Jquery的/使用Javascript

function approvalpersonclick(getstaffiD) {
    $('#' + getstaffiD).css({'background': '#5CADE5', 'border': 'none'});
    $('.clicked').css({'opacity': '0.6'});
    $('#ApprvlPerson').val(getstaffiD);
}

我哪里出错？

Answer 1

您可以使用

之类的jQuery事件处理程序

jQuery(function($) {
  $('.radioapprovalpersons').on('click', 'li:not(.selected) a', function() {
    $(this).parent().addClass('selected').removeClass('disabled');
    $('.clicked').not(this).parent().addClass('disabled').removeClass('selected');
    $('#ApprvlPerson').val($(this).data('id'));
  })
})

ul.radioapprovalpersons {
  list-style-type: none !important;
  margin: 0;
  padding: 0;
  width: 280px;
}
ul.radioapprovalpersons li {
  display: inline-table;
}
ul.radioapprovalpersons li.selected a {
  background: #5CADE5;
  border: none;
}
ul.radioapprovalpersons li.disabled a {
  opacity: 0.6;
}
.a_sub {
  text-align: center;
  margin-top: 5px;
  margin: 5px auto;
  display: block;
  float: none;
  max-width: 30px;
  min-width: 30px;
  background: #dadada;
  background: -moz-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(49%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  line-height: 20px;
  border-radius: 3px;
  border: 1px solid #c2c2c2;
  padding: 0 5px;
  font: normal 11px/20px Tahoma, Geneva, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="radioapprovalpersons">    
  <li><a href="javascript:;" class="a_sub clicked" data-id="48">ONE</a></li>
  <li><a href="javascript:;" class="a_sub clicked" data-id="56">TWO</a></li>
  <li><a href="javascript:;" class="a_sub clicked" data-id="59">ThREE</a></li>
  <li><a href="javascript:;" class="a_sub clicked" data-id="77">FOUR</a></li>
  <li><a href="javascript:;" class="a_sub clicked" data-id="78">FIVE</a></li>
  <li><a href="javascript:;" class="a_sub clicked" data-id="84">SIX</a></li>
</ul>

演示：Fiddle

Answer 2

试试这个JQuery

$('li a').click(function(){
    $("li a").not(this).replaceWith(function() { var text =$(this).text(); return "<p class='a_sub clicked'>"+text+"</p>"});   
});

FIDDLE

Jquery一旦选择了另一个按钮禁用

2 个答案: