Question

我有一个使用jquery ui的表单，我必须做一个无线电选择，从数据库获取值，所以我尝试了这个：

    //function wich reutrn applicable ratio for the pricing
function getAvailableCoeff(){


echo "<td>Coeff : </td>";
    echo "<td><div class='radio'>";
    $req = "SELECT coef,id_type FROM type_client WHERE valide =1 GROUP BY coef";
    $res = mysql_query($req);

    while($row=mysql_fetch_array($res)){
        $id = 'coeff'.$row['id_type'];
        $value = $row['coef'];
        $input = "<label for='$id'>$value</label>";
        $input .= "<input type='radio'id='$id' name='coeff' value='$value'/>";
        echo $input;
    }
    echo "</div></td>";
}

没有什么不困难的吗？但当我把它发送到集成服务器时，我看到了巨大的单选按钮（它们是3个大气压）！ i let you check it here （在屏幕上，“1”，“2”，“3”，“4”，“quadri”，“5”，“6”无线电按钮使用以下语法进行硬编码：<input type="radio" id="spT_radio-coul-1" value="1" name="nbCoul" /> <label for="spT_radio-coul-1">1</label>

此外，单选按钮没有传递形式sumbission，$_POST['coef']仍然是空的.. 所以我看一下html和.. WTF？每个单选按钮都有这样的代码：

    <label for="coeff5" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">0.66</span></span></span></span></span></span></label>

所以jquery auto会生成所有这些跨度，但如何删除它们以获得法线单选按钮？有没有人遇到过jquery ui的那种问题？

TEMPORARY（丑陋）解决方案：

.ui-button-text-only .ui-button-text {
padding:2px;
!important;

}

最终解决方案（Thx SuperScript）：

 //function wich reutrn applicable ratio for the pricing
function getAvailableCoeff($form){
    echo "<td>Coeff : </td>";
    echo "<td><div class='radio'>";
    $req = "SELECT coef,id_type FROM type_client WHERE valide =1 GROUP BY coef";
    $res = mysql_query($req);
    while($row=mysql_fetch_array($res)){
        $id = $form.'coeff'.$row['id_type'].$i;
        $value = $row['coef'];
        $input = "<label for='$id'>$value</label>";
        $input .= "<input type='radio' id='$id' name='coeff' value='$value'/>";
        echo $input;
        $i++;
    }
    echo "</div></td>";
}

我为每个调用传递一个字符串值，就像id非常独特！

Answer 1

解决！问题是使用重复的id s。

在页面上，您的所有<input>都使用相同的id个#coeff5，#coeff2，#coeff1。 jQuery UI使用那些id来添加跨度，因此重复项会破坏它。

id必须是唯一的。

我为此做了一些测试用例：

不工作：http://jsfiddle.net/PGcL4

Working JSFiddle

因此，您可以将PHP代码更改为：

//function wich reutrn applicable ratio for the pricing
function getAvailableCoeff(){
    echo "<td>Coeff : </td>";
    echo "<td><div class='radio'>";
    $req = "SELECT coef,id_type FROM type_client WHERE valide =1 GROUP BY coef";
    $res = mysql_query($req);

    $i=0;
    while($row=mysql_fetch_array($res)){
        $id = 'coeff'.$row['id_type'].$i;
        $value = $row['coef'];
        $input = "<label for='$id'>$value</label>";
        $input .= "<input type='radio' id='$id' name='coeff' value='$value'/>";
        echo $input;
        $i++;
    }
    echo "</div></td>";
}

这使得所有id都像所需的一样独特。

jquery ui创造了许多不受欢迎的跨度

1 个答案: