javascript - 仅当选择相应的单选按钮时才显示管理员的详细信息？

Question

我有一个页面可以编辑帖子的管理员。在此页面中有一些单选按钮。每个单选按钮对应于一个帖子的管理员。选择单选按钮后，该管理员的详细信息将填充到表单字段中

问题是，当用户访问帖子页面的此编辑管理员时，不应检查单选按钮，因此单选按钮中没有“已检查”属性。这样就可以了。

但是，尽管没有选中单选按钮，但首次访问该页面时，表单字段中默认会显示最后创建的管理员的详细信息。然后，如果我选择其他管理员，则会显示所选管理员的详细信息，但是当首先访问该页面并且表单字段中没有选中单选按钮时，会显示最后创建的管理员的详细信息。

您知道如何仅在选择相应的单选按钮时显示管理员的详细信息吗？

完整形式:

<form method="post" class="clearfix" action="{{route('admins.update', ['id' => $post->id])}}" enctype="multipart/form-data">
    {{csrf_field()}}
    @foreach($administrators $admin)
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radiobutton" id="{{$admin->id}}" value="">
            <label class="form-check-label" for="">
              {{$admin->name}}
            </label>
          </div>
    @endforeach
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radiobutton" id="create_administrator"
             value="option2">
      <label class="form-check-label" for="exampleRadios2">
          Create new administrator
      </label>
  </div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" required class="form-control" value="{{ $admin->name }}" name="name">
  </div>

  <!-- below I have more form fields like administrator name, email, etc -->

  <input type="submit" id="adminStoreButton" class="btn btn-primary" value="Create"/>
  <input type="submit" id="adminUpdateButton" class="btn btn-primary" value="Update"/>
  </form>

JS:

 $(document).ready(function () {

    $("#adminStoreButton").hide();

    var admins = {!!  $admin !!}

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

        if($(this).attr("id") == "create_administrator"){
            $("#adminUpdateButton").hide();
            $("#adminStoreButton").show();
            $("#edit_administrator").attr('action', '{{route('admins.store', ['post_id' => $post->id])}}');
        }
        else{
            $("#adminUpdateButton").show();
            $("#adminStoreButton").hide();
            $("#edit_administrator").attr('action', '{{route('admins.update', ['post_id' => $post->id])}}');

        }

        let id = $(this).attr("id");
        let data = admins.find(e => e.id == id) || {
            name: "",
            email: "",
            ...
            date: "",
        };

        $("input[name='name']").val(data.name);
        $("input[name='email']").val(data.email);
       ...
        $("input[name='date']").val(moment(data.date).format('DD MMMM YYYY - HH:mm'));

    });
});

//管理员 Controller 编辑方法，返回上面编辑管理员表单的 View :

public function edit($id)
{
    $post = Post::find($id);
    $administrators = Administrator::where('post_id', $id)->get();

    return view('administrators.edit')
        ->with('post', $post)
        ->with('administrators', $administrators));
}

//更新并存储管理路由

Route::get('post/edit/{id}/admins',    [ 'uses' => 'AdminController@edit', 'as'=>'admins.edit']);
Route::post('post/update/{id}/admins', [ 'uses' => 'AdminController@update', 'as'=>'admins.update']);
Route::post('post/store/{id}/admins', [ 'uses' => 'AdminController@store', 'as'=>'admins.store']);

//管理员 Controller 更新方法:

public function update(Request $request, $id){

        $this->validate($request, [
            'name' => 'required|string',
          ...
        ]);

        $adminToUpdate = Administrator::find($request->radiobutton);

        $adminToUpdate->name = $request->name;
        ...

        $adminToUpdate->save();

        return redirect()->back();
    }
}

//管理员 Controller 存储方法:

public function store(Request $request, $id){
    $this->validate($request, [
        'name' => 'required|string',
    ]);

    $post = Post::find($id);

    Administrator::create([
        'name' => $request->name,
        'post_id' => $post->id
    ]);

    return redirect()->back();
}

Answer 1

字段(姓名、电子邮件等)的值属性最初应为空。你不需要

value="{{ $admin->name }}"

在初始加载时，因为您正在单选按钮单击事件中设置值。相反，它应该是:

value=""

如:

<div class="form-group">
    <label for="name">Name</label>
    <input type="text" required class="form-control" value="" name="name">
</div>