Yii2:如何禁用单选按钮

时间:2015-07-16 14:14:18

标签: javascript php jquery yii2 radiobuttonlist

<?php  echo $form->field($model, 'status')->radioButtonGroup($model->getStatusList(), ['disabledItems'=>['APPROVED','DIGITAL','CDP']], 
    [
    'class' => 'btn-group-sm',
    'itemOptions' => ['labelOptions' => ['class' => 'btn btn-warning']]
    ]); 
    ?>

enter image description here

我想禁用当前选中的所有先前单选按钮。 正如我在图像状态'APPROVED'中所示,'DIGITAL','CDP'被禁用,因为选择了状态打印。我已将这三种状态置于禁用功能中,但如何使用jQuery实现此目的。

PS-使用Yii2

HTML代码 -

<div class="form-group field-status-status required">
    <label class="control-label" for="status-status">Status</label>
    <input type="hidden" name="Status[status]" value="">
    <div id="status-status" class="btn-group" data-toggle="buttons">
        <label class="btn btn-default disabled">
            <input type="radio" name="Status[status]" value="APPROVED" disabled> Approved</label>
        <label class="btn btn-default disabled">
            <input type="radio" name="Status[status]" value="DIGITAL" disabled> Digital</label>
        <label class="btn btn-default disabled">
            <input type="radio" name="Status[status]" value="CDP" disabled> CDP</label>
        <label class="btn btn-default">
            <input type="radio" name="Status[status]" value="PRINT"> Print</label>
        <label class="btn btn-default">
            <input type="radio" name="Status[status]" value="OTHERPROCESS"> OtherProcess</label>
        <label class="btn btn-default">
            <input type="radio" name="Status[status]" value="PACKING"> Packing</label>
        <label class="btn btn-default">
            <input type="radio" name="Status[status]" value="DISPATCH"> Dispatch</label>
    </div>

1 个答案:

答案 0 :(得分:0)

您可以使用prop禁用单选按钮。

$(':radio:checked').closest('label').prevAll('label :radio').prop('disabled', true);

演示:

$(':radio').on('change', function() {
  $(':radio:checked').closest('label').prevAll('label').addClass('disabled').children(':radio').prop('disabled', true);
}).trigger('change');
.disabled {
  color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-group field-status-status required">
  <label class="control-label" for="status-status">Status</label>
  <input type="hidden" name="Status[status]" value="">
  <div id="status-status" class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
      <input type="radio" name="Status[status]" value="APPROVED">Approved</label>
    <label class="btn btn-default">
      <input type="radio" name="Status[status]" value="DIGITAL">Digital</label>
    <label class="btn btn-default">
      <input type="radio" name="Status[status]" value="CDP" checked>CDP</label>
    <label class="btn btn-default">
      <input type="radio" name="Status[status]" value="PRINT">Print</label>
    <label class="btn btn-default">
      <input type="radio" name="Status[status]" value="OTHERPROCESS">OtherProcess</label>
    <label class="btn btn-default">
      <input type="radio" name="Status[status]" value="PACKING">Packing</label>
    <label class="btn btn-default">
      <input type="radio" name="Status[status]" value="DISPATCH">Dispatch</label>
  </div>