如何禁用/启用根据复选框值进行选择

时间:2019-04-29 07:03:38

标签: jquery

我有一个带有复选框的表格,然后选择。我想根据复选框值禁用/启用选择。我已经有了if-else,但是我不知道如何禁用/启用选择。我已经尝试了一些代码,但是它们对我不起作用。

我尝试了以下代码,但仍然无法禁用/启用选择选项。我的复选框ID是Checkbox,选择的ID是旅行成员。我想如果复选框值为'individual',则禁用选择,否则启用

$('#Checkbox').on('change', 'input[type=checkbox]', function() {  

   var value = $(this).val();


   if(value == 'group') {
     $('#trip_members').prop('disabled', false);
   }else if(value == 'individual') {
    $('#trip_members').prop('disabled', true);
   }else if(value == '') {
    $('#trip_members').prop('disabled', false);
   }
});

我的选择选项如下。是因为jquery无法检测到php中的id?

    <label>Trip Members</label><br> 

                 <?php
                $query = "SELECT ud.u_name,u.u_id FROM tbl_user_details as ud , tbl_user as u WHERE u.u_id = ud.u_id AND u.active=1 AND (u.g_id = 1 OR u.g_id = 2 OR u.g_id = 3 OR u.g_id = 4 OR u.g_id = 5)";

                // Successful query?
                    if($result = mysqli_query($conn,$query))  {
                // If there are results returned, prepare combo-box
                    if($success = mysqli_num_rows($result) > 0) {
                    echo "<select class='form-control' id='trip_members' name='trip_members[]' multiple>";
                // For each item in the results...
                    while ($row = mysqli_fetch_array($result))
                    // Add a new option to the combo-box

                    if (in_array($row['u_id'],$retrieved_majors2))
                    {
                       echo "<option value='$row[u_id]' selected>$row[u_name]</option>";

                    }else{
                        echo "<option value='$row[u_id]'>$row[u_name]</option>";
                    }

                    // End the combo-box
                     echo "</select>";
                    }
                // No results found in the database
                    else { echo "No results found."; }
                    }
             // Error in the database
                    else { echo "Failed to connect to database."; }
                ?>  

我的复选框代码如下

<div class="col-md-6 col-sm-12 col-xs-12 form-group">
                <label>Type:</label><br>    
                 <div id="Checkbox">
                <label><input type="checkbox" <?php if($row_RecListMileage['type'] == "individual") echo "checked='checked'"; ?>  
                value="individual" name="type" id="type"> Individual</label>  

                <label> <input type="checkbox" <?php if($row_RecListMileage['type'] == "group") echo "checked='checked'"; ?> 
                 value="group" name="type" id="type"> Group</label>           
                 </div>
                 </div>

2 个答案:

答案 0 :(得分:0)

您的代码没什么问题,但是有时可以采用另一种方法

declare @nodeid int = '1';
 with cte as ( select  cust_ID, parentid, name, joinside,regdate,package,null lnode, null rnode
               from  user_detail 
               where cust_ID = @nodeid 
               union all 
               select t.cust_ID, t.parentid,t.name, t.joinside,t.regdate,t.package, 
               ISNULL(cte.lnode, CASE WHEN t.joinside = 0 THEN 1 ELSE 0 END) lnode, 
               ISNULL(cte.rnode, CASE WHEN t.joinside = 1 THEN 1 ELSE 0 END) rnode 
               from  user_detail t 
               inner join cte on cte.cust_ID = t.parentid )

 select @nodeid nodeid,name,ctttt.cust_ID,parentid,regdate,package,insttt.cust_id , 
        (select count(*) from installments as insttt  where  ctttt.cust_id = insttt.cust_id ) cnt
 from cte as ctttt 
 where rnode='0'
 order by ctttt.cust_id asc option (maxrecursion 0)

EDIT1 :我刚刚注意到您有多个复选框,并且相同的ID无法使用。使用类或数据属性来监听更改事件。

$('#Checkbox').on('change', 'input[type=checkbox]', function()
{
    var value = $(this).val();
    if(value == 'group')
    {
        $('#trip_members').removeAttr('disabled');
    }
    else if(value == 'individual')
    {
        $('#trip_members').addAttr('disabled');
    }
    else if(value == '')
    {
        $('#trip_members').removeAttr('disabled');
    }
});

答案 1 :(得分:0)

希望这就是您的期望

$('.check').change(function(e){
 $(this).siblings().prop('checked',false)
 var value = $(this).val();
   if(value == 'group') {
     $('#trip_members').prop('disabled', false);
   }else if(value == 'individual') {
    $('#trip_members').prop('disabled', true);
   }else if(value == '') {
    $('#trip_members').prop('disabled', false);
   }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="check" type="checkbox"   value="group"> group<br>
<input class="check" type="checkbox"   value="individual">individual<br>
<input  class="check" type="checkbox"   value=""  > none<br>
  <select id ="trip_members">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>