单选按钮 - 从 Db 中读取预选值

Question

我有一个单选按钮，它从 mysql 读取值并成功突出显示正确的单选按钮。 我也有 jquery 验证，当单选按钮为“否”值时，2 个下拉菜单会变灰。

我的问题在于，当用户选择“否”单选按钮时，它会将其保存到 mysql，但是当他/她重新登录时，单选按钮正确位于“否”位置，但是 2 个下拉菜单不是灰色的像他们应该的那样。如果我然后单击“否”单选按钮，它们会变灰。

我显然不希望这样，如果用户选择“否”然后重新登录，我希望下拉菜单在登录时显示为灰色。

php代码：

<?php
$row2 = "SELECT * FROM user WHERE username = '" . mysql_real_escape_string($_SESSION['username']) . "'";
$result = mysql_query($row2) or die("Error in SQL: " . mysql_error());
$row3 = mysql_fetch_array($result);

?>

单选按钮代码：

       <input name="attendance1" type="radio" id="Yes" value="Yes" <?php if($row3['attendance1']=="Yes") { echo "checked"; }?>/>Yes 
                 <br />
         <input name="attendance1" type="radio" id="No" value="No" <?php if($row3['attendance1']=="No") { echo "checked"; }?>/>No

I would be greatful if someone could tell me where i am going wrong. When retrieving the value from the database it is obviously not physically selecting the radio button which i would like it to do

JQUERY VALIDATION:

          <script src="jquery.js"></script>
         <script>      
            $( function(){    
                    function validate(id){       
                        var enabled = ($("input[name='attendance" + id + "']:checked").val() == 'Yes');         
                        if(enabled){              
                            //Please select option is selected              
                            if($("#colour" + id)[0].selectedIndex == 0){                 
                            alert('Please make your colour selection');                  
                            return false;             
                            }              
                            //Please select option is selected              
                            if($("#shade" + id)[0].selectedIndex == 0){                  
                                alert('Please select your shade');                  
                                return false;             
                            } 


                        }     
                        return true;    
                    };

                    $("input[name^='attendance']").click(function() {  

                        var id = this.name.replace('attendance', '');      
                        $("#colour" + id + ", #shade" + id).prop("disabled", this.value == 'No');         
                        validate(id);    
                    });      
                   $("input:submit").click(function(){         
                       var retVal = true;
                       $.each([1], function(i, val){
                          retVal = (validate(val) && retVal);
                       });
                        return retVal;   

$(document).ready(function(){    

$("input[name=attendance1]:checked").triggerHandler('click'); 
});     
</script>

两个下拉菜单称为颜色和阴影

Answer 1

您需要在head 中添加与此类似的内容，以便在页面加载时自动禁用它。我相信您可以为id 找出一个合适的值。

<script>
$(document).ready(function () {
  $("#colour" + id + ", #shade" + id).prop("disabled", this.value == 'No');
});
</script>

你可以从 PHP 中禁用下拉菜单，但这是个坏主意，因为你会搞砸禁用 JavaScript 的人。

Answer 2

让 jQuery 在页面加载时触发 onclick 处理程序：

$(document).ready(function(){
   $("input[name=attendance]:checked").triggerHandler('click');
});

所以你的总代码看起来像：

<script src="jquery.js"></script>
<script>      
$( function(){    
    function validate(id){       
        var enabled = ($("input[name='attendance" + id + "']:checked").val() == 'Yes');         
        if(enabled){              
            //Please select option is selected              
            if($("#colour" + id)[0].selectedIndex == 0){                 
            alert('Please make your colour selection');                  
            return false;             
            }              
            //Please select option is selected              
            if($("#shade" + id)[0].selectedIndex == 0){                  
                alert('Please select your shade');                  
                return false;             
            } 


        }     
        return true;    
    };

    $("input[name^='attendance']").click(function() {  

        var id = this.name.replace('attendance', '');      
        $("#colour" + id + ", #shade" + id).prop("disabled", this.value == 'No');         
        validate(id);    
    });      
   $("input:submit").click(function(){         
       var retVal = true;
       $.each([1], function(i, val){
          retVal = (validate(val) && retVal);
       });
        return retVal;  
   });
});

$(document).ready(function(){    
    $("input[name=attendance]:checked").triggerHandler('click'); 
});     

</script>