0

4 列の html フォーム最初の 2 列は、無効な ='disabled' の入力ボックス内のサイズです。ラジオ ボタンをクリックしてサイズを選択すると、チェックボックスが表示されます。そのチェックボックスをクリックすると、クラスを変更して属性を無効にしたいと思います。入力ボックスを編集できるように、そのテーブル行の入力の

<table width="388" border="1" id="product1">
<tr>
<td width="100">Width</td>
<td width="100">Height</td>
<td width="48">Price</td>
<td width="65">Select</td>
</tr>
<tr>
<td><input type="text" disabled='disabled'value="200"/><span> CMS</span></td>
<td><input disabled='disabled'type="text" value="500"/><span> CMS</span></td>
<td>£50.00</td>
<td><input type="radio" name="product1" value="size1" /> Customise<input     type="checkbox"   name="custom[size1]" class="custombox" value="1"/></td>
 </tr>
 <tr>
<td>200</td>
<td>1000</td>
<td>£100.00</td>
<td><input type="radio" name="product1" value="size2" /> Customise<input         disabled='disabled' type="checkbox" name="custom[size2]" class="custombox" value="1"/></td>
</tr>
<tr>
<td>200</td>
<td>1500</td>
<td>£150</td>
<td><input type="radio" name="product1" value="size3" /> Customise<input     type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
</tr>
</table>
<table width="288" border="1" id="product2">
<tr>
<td width="72">Width</td>
<td width="75">Height</td>
<td width="48">Price</td>
<td width="65">&nbsp;</td>
</tr>
 <tr>
<td>200</td>
<td>500</td>
<td>£50.00</td>
<td><input type="radio" name="product2" value="size1" /> Customise<input     type="checkbox" name="custom[size1]" class="custombox" value="1"/></td>
</tr>
<tr>
<td>200</td>
<td>1000</td>
<td>£100.00</td>
<td><input type="radio" name="product2" value="size2" /> Customise<input     type="checkbox" name="custom[size2]" class="custombox" value="1"/></td>
 </tr>
 <tr>
<td>200</td>
<td>1500</td>
<td>£150</td>
<td><input type="radio" name="product2" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
 </tr>
<table>

CSS

input[type=checkbox] {
display: none;
}

input[type=checkbox].shown {
display: inline;
}

input .edit{
border:1px solid red;
}
input[disabled='disabled'] {  
border:0px;
width:60px;
padding:5px;
float:left;
background:#fff;
}

span{float:left; width:30px; padding:5px;}

Jクエリ

 $("body :checkbox").hide();

// The most obvious way is to set radio-button click handlers for each table separatly:
$("#product1 :radio").click(function() {
$("#product1 :checkbox").hide();
  $("#product1 .cbox").hide();
$(this).parent().children(":checkbox").show();
  $(this).parent().children(".cbox").show();
});

$("#product2 :radio").click(function() {
$("#product2 :checkbox").hide();
    $("#product2 .cbox").hide();
$(this).parent().children(":checkbox").show();
$(this).parent().children(".cbox").show();
});

これは私が考えたことですが、うまくいきません

$("#product1 :checkbox").click(function(){
$(this).parent("tr").children("td :input").attr('disabled','');
$(this).parent("tr").children("td :input").toggleClass(edit);
});

$("#product2 :checkbox").click(function(){
$(this).parent("tr").children("td :input").attr('disabled','');
$(this).parent("tr").children("td :input").toggleClass(edit);
});

助けてくれてありがとう。

4

2 に答える 2

0

他の誰かがこの問題を抱えている場合に備えて、この行の入力の属性を設定します。

于 2011-01-15T19:35:15.283 に答える
0

jQueryのFAQによると、使用できます

$('#x').attr('disabled', false);
//or
$("#x").removeAttr('disabled');

.parent("tr")あいまいな可能性があるため、おそらく最良のアイデアではないことに注意してください。より具体的にしてください（クラスまたは何かを与えてください）。

于 2011-01-15T18:46:58.910 に答える