php - jquery ui 创建了很多不需要的跨度

Question

我有一个使用 jquery ui 的表单， 我必须做一个 radio 选择，它从数据库中获取值，所以我尝试了这个:

    //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 自动生成所有这些跨度，但如何删除它们以获得法线单选按钮？ 有人在使用 jquery ui 时遇到过这类问题吗？

临时(丑陋)解决方案:

.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

在页面上，你所有的<input>使用同一套 id小号(#coeff5，#coeff2，#coeff1)。 jQuery UI 使用那些 id s 添加跨度，因此重复项会破坏它。

id s 必须是唯一的。

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

不工作: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像要求的那样独一无二。