更改选项时禁用按钮

时间:2017-06-07 12:59:14

标签: javascript html css

我有这段代码:

<tr>
    <td style="width:250px !important">
     <center>
<?php 
      if($available[1][$x] != ''){ 
      $counter++;?>
      <input type="checkbox" class="colour-button choice1 daypicker1" day="1" name="select_time1[]" value="<?php echo "Monday ". @$available[1][$x];?>" id="btn112<?php echo $counter;?>" /><label for="btn112<?php echo $counter;?>"> <i class="fa fa-check-circle hide12" id="chk-btn112<?php echo $counter;?>"></i>  <?php echo @$available[1][$x];?></label>
      <?php }?>
     </center>
   </td>
   <td style="width:250px !important">
     <center>
      <?php if($available[2][$x] != ''){
      $counter++;?>
      <input type="checkbox" class="colour-button choice2 daypicker2" day="2" name="select_time2[]" value="<?php echo "Tuesday ". @$available[2][$x];?>" id="btn1012<?php echo $counter;?>" /><label for="btn1012<?php echo $counter;?>"> <i class="fa fa-check-circle hide13" id="chk-btn1012<?php echo $counter;?>"></i>  <?php echo @$available[2][$x];?></label>
      <?php }?>  
     </center>
   </td>
   <td style="width:250px !important">
    <center>
      <?php if($available[3][$x] != ''){
      $counter++;?>
      <input type="checkbox" class="colour-button choice3 daypicker3" day="3" name="select_time3[]" value="<?php echo "Wednesday ".  @$available[3][$x];?>" id="btn102<?php echo $counter;?>" /><label for="btn102<?php echo $counter;?>"> <i class="fa fa-check-circle hide14" id="chk-btn102<?php echo $counter;?>"></i>  <?php echo @$available[3][$x];?></label>
      <?php }?>  
    </center>
  </td>
   <td style="width:250px !important">
    <center>
      <?php if($available[4][$x] != ''){
      $counter++;?>
      <input type="checkbox" class="colour-button choice4 daypicker4" day="4" name="select_time4[]" value="<?php echo "Thursday".  @$available[4][$x];?>" id="btn1032<?php echo $counter;?>" /><label for="btn1032<?php echo $counter;?>"> <i class="fa fa-check-circle hide15" id="chk-btn1032<?php echo $counter;?>"></i>  <?php echo @$available[4][$x];?></label>
      <?php }?>  
    </center>
   </td>
   <td style="width:250px !important">
    <center>
      <?php if($available[5][$x] != ''){
      $counter++;?>
      <input type="checkbox" class="colour-button choice5 daypicker5" day="5" name="select_time5[]" value="<?php echo "Friday ".  @$available[5][$x];?>" id="btn1042<?php echo $counter;?>" /><label for="btn1042<?php echo $counter;?>"> <i class="fa fa-check-circle hide16" id="chk-btn1042<?php echo $counter;?>"></i>  <?php echo @$available[5][$x];?></label>
      <?php }?>  
    </center>
   </td>
    <td style="width:250px !important">
    <center>
      <?php if($available[6][$x] != ''){
      $counter++;?>
      <input type="checkbox" class="colour-button choice6 daypicker6" day="6" name="select_time7[]" value="<?php echo "Saturday ".  @$available[6][$x];?>" id="btn1062<?php echo $counter;?>" /><label for="btn1062<?php echo $counter;?>"> <i class="fa fa-check-circle hide17" id="chk-btn1062<?php echo $counter;?>"></i>  <?php echo @$available[6][$x];?></label>
      <?php }?>  
    </center>
   </td>
      <td style="width:250px !important">
    <center>
      <?php if($available[7][$x] != ''){
      $counter++;?>
      <input type="checkbox" class="colour-button choice7 daypicker7" day="7" name="select_time8[]" value="<?php echo "Sunday ".  @$available[7][$x];?>" id="btn1072<?php echo $counter;?>" /><label for="btn1072<?php echo $counter;?>"> <i class="fa fa-check-circle hide18" id="chk-btn1072<?php echo $counter;?>"></i>  <?php echo @$available[7][$x];?></label>
      <?php }?>  
    </center>
   </td>
 </tr>

代码是第一部分,第二部分是类“color-button1”,这里是一个代码行示例,因为它们每天都有很多显示和隐藏

<div class="startdays" id="day-1" <?=$min!=$value ? 'style="display:none;"' : ''?>>
    <input type="checkbox" class="colour-button1" name="select_time6[]" value="<?php echo date('l, F dS', strtotime("+7 days"))?>" id="btn1" disabled/><label for="btn1" style="position:relative;padding-left:215px;padding-right:215px;"><i class="fa fa-check-circle fa-lg hide11" id="chk-btn1"></i>   <?php echo date('l, F dS', strtotime("+7 days"));?></label>
</div>

上面的代码只是day-picker1(星期一)的一部分,你可以看到当我点击星期一我看到星期一的日期,然后我点击一个然后下一个按钮变为启用,但是如果我删除“星期一”星期三日期显示,但下一个按钮已启用,我该如何解决这个问题? 但是在发生这种情况时禁用下一个按钮,这是我的javascript代码:

Array.min = function( array ){
    return Math.min.apply( Math, array );
};

$(document).ready(function() {
var days = new Array();      

$(function() {
      $(".colour-button").click(enable_cb);
    });
    function enable_cb() {
           if (this.checked) {
                //this will mean at least one is always checked
                $("input.colour-button1").prop("disabled", false);
                $("#chk-" + this.id).show();
            }
            else {
                //in this case, hide the element if you need to, but check for ANY items
                $("#chk-" + this.id).hide();

                var day = $(this).attr("day");
                if( ($.inArray(day, days) !== -1) ) {
                    days.splice(days.indexOf(day), 1);
                    console.log(days);
                    console.log(Array.min(days));
                    var minimum = Array.min(days);
                    $(".startdays").hide();
                    $("#day-"+minimum).show();
                }

                if ($(".colour-button:checked").length == 0) {
                    $("input.colour-button1").attr("disabled", true).prop("checked", false);
                    $('.hide11').hide(); 
                     $('#submit').attr('disabled', true).removeClass('orangeBtn23').addClass('disabled'); //disable input
                }
            }
        }
$('.colour-button1').click(function () {
    $("#chk-"+this.id).show();
    //check if checkbox is checked
    if ($(this).is(':checked')) {
        $('#submit').removeAttr('disabled').addClass('orangeBtn23').removeClass('disabled'); //enable input
    } 
    else {
        $("#chk-"+this.id).hide(); 

        if ($('.colour-button1:checked').length == 0){
         $('#submit').attr('disabled', true).removeClass('orangeBtn23').addClass('disabled'); //disable input
        $("#chk-"+this.id).hide(); 
        $(this.id).hide();
      } }


});

$('.daypicker1').click(function () {
    if ($(this).is(':checked')) {
        if( !($.inArray('1', days) !== -1) )
        {
            days.push('1');
        }
        var minimum = Array.min(days);
        $(".startdays").hide();
        $("#day-"+minimum).show();
    } 
});

我尝试过如果color-button1 == 0然后禁用但是它不起作用,因为如果我回到星期一我选择的日期被选中,我不知道该怎么做,日期选择器1,有最多7天它的代码完全相同

0 个答案:

没有答案